YouTube嵌入显示设备支持选项

我使用两个指令将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。很高兴你的网站又开始工作了！介意分享一些关于您用来替换此调用以获取元数据的代码片段吗？