Question

我有一个Backbone App，我有一个View，我想在其中显示一个youtube播放器：

所以在我的视图中，afterRender - 我这样做了：

afterRender: function() {
              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;
              function onYouTubeIframeAPIReady() {
                player = new YT.Player('vid', {
                  height: '390',
                  width: '640',
                  videoId: '',
                  events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                  }
                });
              }

              function onPlayerReady(event) {
                event.target.playVideo();
              }

              var done = false;
              function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                  setTimeout(stopVideo, 6000);
                  done = true;
                }
              }
              function stopVideo() {
                player.stopVideo();
              }
}

但它没有呈现任何东西，但我也没有收到错误，在我的控制台中我可以看到Youtube API已加载...那么我在这里做错了什么？

请帮助..

Answer 1

请参阅此相关问题：Youtube iframe api not triggering onYouTubeIframeAPIReady

我认为问题是你的onYouTubeIframeAPIReady函数需要全局声明，而不是嵌套在另一个函数中。（在您的代码中，它仅在afterRender方法的范围内定义。）

Answer 2

通过更改

function onYouTubeIframeAPIReady() {
 // ...
}

到

window.onYouTubeIframeAPIReady = function() {
 // ...
}

它现在有效！在这里找到线索Youtube iframe api not triggering onYouTubeIframeAPIReady

BackboneJS如何在视图中加载Youtube iframe

2 个答案: