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>

angular-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']
      }]
    });
  }]);

每次进入播放页面时都可以播放视频而不刷新吗？

任何帮助将不胜感激。

谢谢。