YouTube嵌入显示设备支持选项

YouTube嵌入显示设备支持选项,youtube,youtube-api,embed,Youtube,Youtube Api,Embed,我使用两个指令将Youtube视频嵌入到angular应用程序中,这两个指令使用Youtube Iframe API。第一个异步加载库 angular.module('myApp') .service('youTubeService', function($rootScope, $window) { var self = this; self.ready = false; $window.onYouTubeIframeAPIReady = fun

我使用两个指令将Youtube视频嵌入到angular应用程序中,这两个指令使用Youtube Iframe API。第一个异步加载库

   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();
                  });
              }
    ...
这是工作了几个月,直到昨天,但现在我得到了以下视频作为我的嵌入在所有桌面浏览器中,如本文所述


我的问题是我不知道应该修改什么,因为据我所知,iframeapi是正确的。有人知道我应该改变什么吗?

所以我们的网站也有同样的问题

事实证明,我们的客户机,它使用的代码非常类似于您的上述功能正常。我们的问题是如何将视频和视频元数据添加到数据库中

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

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

将视频添加到我们的系统。由于这是一个不推荐使用的端点,我们必须升级到v3系统,这里解释道:

服务和指令代码看起来不错;但是,看起来您正在加载通过指令attrs.youtube上的属性提供的youtube ID。该属性是如何设置的。。。是手册吗?或者它是从数据API获取的ID?如果是后者,那么source很可能正在使用现已退役的V2 API。由于这个问题,我们的整个网站都被破坏了:我们的代码的唯一区别是,OnyoutubeiFrameAPReady被放在angular应用程序之外,承诺会定期检查全局设置就绪的bool。而且,更奇怪的是,是不是有些嵌入在我们的网站中使用了相同的代码。@jlmcdonald-谢谢你为我指明了正确的方向。我们在id中使用rails gem获取视频,该gem使用V2 api。当我们换上一块新的宝石时,一切又恢复正常了。如果您将您的评论作为答案发布,我将接受我们使用的是正确的端点,但我们使用与v2api通信的railsgem获取视频id。很高兴你的网站又开始工作了!介意分享一些关于您用来替换此调用以获取元数据的代码片段吗?