YouTube嵌入显示设备支持选项

时间:2015-05-08 07:38:36

标签: youtube youtube-api embed

我使用两个使用YouTube Iframe API的指令在我的角度应用中嵌入了Youtube视频。第一个加载库异步

   angular.module('myApp')
    .service('youTubeService', function($rootScope, $window) {
      var self = this;
      self.ready = false;
      $window.onYouTubeIframeAPIReady = function () {
          self.ready = true;
          console.log("Youtube service ready");
          $rootScope.$broadcast('youTubeServiceReady', true);
      };
      var tag = document.createElement('script');
      tag.src = '//www.youtube.com/iframe_api';
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    });

然后我使用javascript库嵌入视频

angular.module('myApp')
  .directive('youtube', function (youTubeService) {
    return {
          link: function (scope, element, attrs) {
              var player;
              var playerReady = false;
              var playerState;
              var callback;

              var carouselScope = element.parent().parent().scope();

              function createPlayer() {
                  player = new YT.Player(element[0], {
                      height: attrs.height,
                      width: attrs.width,
                      videoId: attrs.youtube,
                      playerVars: { 'start' : attrs.starttime, 'end' : attrs.endtime, 'origin': 'https://', showinfo: 0, modestbranding: 1 },
                      events: {
                          onReady: function () {
                              playerReady = true;
                              // if (callback !== null) {
                              //     callback();
                              // }
                          },
                          onStateChange: function (event) {
                              //console.log("Time:" + getCurrentTime() + ", Duration:" + getDuration() );
                              playerState = event.data;
                              if (playerState === YT.PlayerState.PAUSED) {
                                 carouselScope.play();
                              }
                          }
                      }
                  });
              }

              if (youTubeService.ready) {
                  createPlayer();
              } else {
                  scope.$on('youTubeServiceReady', function () {
                      createPlayer();
                  });
              }
    ...

直到昨天这已经工作了几个月,但现在我得到了以下视频,因为我在所有桌面浏览器中嵌入了

https://support.google.com/youtube/answer/6098135?hl=en-GB

我的问题是我无法弄清楚我应该改变什么,因为据我所知,iframe api是正确的。有谁知道我应该改变什么?

1 个答案:

答案 0 :(得分:0)

所以我们的网站遇到了完全相同的问题。

事实证明,我们的客户端使用与您的代码非常类似的代码正常运行。我们的问题最终成为我们将视频和视频元数据添加到数据库的方式。

这可能不是您的问题,但我们正在使用

http://gdata.youtube.com/feeds/api/videos/<video id>?v=2&alt=json

将视频添加到我们的系统中。由于这是一个不推荐使用的端点,我们不得不升级到v3系统,这将在此解释:ftp://ns432777.ip-37-59-27.eu/Program%20Files%20%28x86%29/Windows%20Kits/8.0/Include/um/baseaudioprocessingobject.h