angularjs - angularjs1.x youtube 视频仅使用 youtube iframe api 播放一次

Question

我正在使用 Angular js 1.x 开发一个网站。

我正在使用 youtube iframe API 播放 youtube 视频。

这是我的问题。

第一次进入播放页面时，按视频播放按钮可以看到youtube视频正在播放。

然后回到上一页，重新进入相​​同的播放页面，我再次按下播放按钮，看到如下错误信息。

“播放时出现问题。（播放 ID：***）点击重试”

当我重复上述步骤时，总是会发生这种情况。但是当我刷新页面时，视频会正常播放。

我通过谷歌搜索研究了这些决议，但没有其他办法接近。恐怕这是一个编程问题。

这是我的代码。

CarDetail.html

<youtube width="743" height="538" videoid="{{item.video_id}}"></youtube>

角-youtube.js

（来自http://blog.oxrud.com/posts/creating-youtube-directive/）

angular.module('YouTubeApp', [])
  .constant('YT_event', {
    STOP: 0,
    PLAY: 1,
    PAUSE: 2
  })

  .directive('youtube', function($window, YT_event, youTubeApiService) {
    return {
      restrict: "E",

      scope: {
        height: "@",
        width: "@",
        videoid: "@"
      },

      template: '<div></div>',

      link: function(scope, element, attrs, $rootScope) {
        var len = $('script').filter(function() {
          return ($(this).attr('src') == 'https://www.youtube.com/iframe_api');
        }).length;

        if (len === 0) {
          var tag = document.createElement('script');
          tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        }

        var player;

        youTubeApiService.onReady(function() {
          player = setupPlayer(scope, element);
        });

        function setupPlayer(scope, element) {
          return new YT.Player(element.children()[0], {
            playerVars: {
              autoplay: 0,
              html5: 1,
              theme: "light",
              modesbranding: 0,
              color: "white",
              iv_load_policy: 3,
              showinfo: 1,
              controls: 1
            },

            height: scope.height,
            width: scope.width,
            videoId: scope.videoid

          });
        }

        scope.$watch('videoid', function(newValue, oldValue) {
          if (newValue == oldValue) {
            return;
          }

          if (typeof player !== "undefined") {
            // player.cueVideoById(scope.videoid);
          }
        });

        scope.$watch('height + width', function(newValue, oldValue) {
          if (newValue == oldValue) {
            return;
          }

          if (typeof player !== "undefined") {
            player.setSize(scope.width, scope.height);
          }
        });

        scope.$on(0, function() {
          if (typeof player !== "undefined") {
            player.seekTo(0);
            player.stopVideo();
          }
        });

        scope.$on(1, function() {
          if (typeof player !== "undefined") {
            player.playVideo();
          }
        });

        scope.$on(2, function() {
          if (typeof player !== "undefined") {
            player.pauseVideo();
          }
        });
      }
    };
  })

  .factory("youTubeApiService", function($q, $window) {

    var deferred = $q.defer();
    var apiReady = deferred.promise;

    $window.onYouTubeIframeAPIReady = function() {
      deferred.resolve();
    };

    return {
      onReady: function(callback) {
        apiReady.then(callback);
      }
    };

  });

加载 angular-youtube.js

angular.module('app')
  .constant('JQ_CONFIG', { ...
  })
  .config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
    $ocLazyLoadProvider.config({
      debug: true,
      events: true,
      modules: [{
        name: 'YouTubeApp',
        files: [HOMEPAGE_ROOT + '/webpage/bower_components/angular-youtube/angular-youtube.js']
      }]
    });
  }]);

有没有什么方法可以在每次进入播放页面不刷新的情况下播放视频？

任何帮助，将不胜感激。

谢谢。

标签： angularjsapiiframeyoutube