Youtube iFrame(使用javascript API)第一次加载,但不加载第二次.为什么？

Question

我正在使用带有以下代码的iFrame Youtube API.我使用Ajax调用此视图来呈现它并将其附加到我页面中的div.yt-player中.它在我第一次调用视图时工作,但在我关闭视频(它清空div.yt-player)并点击另一个调用我的视图的链接后,视频根本没有加载(空白).我一直在努力,但仍然不明白为什么会发生这种情况,特别是它第一次运作.任何形式的帮助将不胜感激..谢谢.

PS:视图呈现html和javascript.

Html
<div id="player"></div>

Javascript:
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('player', {
      height: '486',
      width: '864',
      videoId: '#{@media['youtube_url']}',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      },
      playerVars: {
        'showinfo': 0,
        'iv_load_policy': 3,
        'color': 'white',
        'fs': 1,
        'autoplay': 1,
        'vq': 'hd720'
      }
    });
  }

  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();
  }

Answer 1

只需检查脚本是否已定义.

if(document.getElementById('iframe_api') === null){
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            tag.id = "iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        }
else
    runPlayer();

function runPlayer(){
            var player;
            player = new YT.Player(element.children()[0], {
                playerVars: {
                    autoplay: 1,
                    html5: 1,
                    controls: 1,
                    showsearch: 0,
                    showinfo: 0
                },
                height: scope.height,
                width: scope.width,
                videoId: scope.videoid,
                events: {
                    onStateChange: function (event) {
                        if (event.data == YT.PlayerState.ENDED) {
                            scope.$emit('VideoEnded');
                        }
                    }
                }
            });
        }
$window.onYouTubeIframeAPIReady = function () {
    runPlayer();
};

Answer 2

我调试了问题。onYouTubeIframeAPIReady() 仅在第一次加载 YouTube API 时调用（例如，当用户刷新页面并单击视图的链接时），并且因为我在 Ajax 中调用我的视图，所以它不会被触发以下时间。

因此，我通过将第一块代码包装在条件中来替换它：

  if (typeof youtube_api_init == 'undefined') {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  } 

和

if (typeof youtube_api_init != 'undefined') {
  onYouTubeIframeAPIReady();
}

在脚本的末尾，我为浏览器设置了 youtube_api_init 以记住 YouTube API 已经加载：

var youtube_api_init = 1;

PS：我第一次尝试时，我将变量命名为 yt_api_init 而不是 youtube_api_init，但它不起作用，因为 YouTube 已经在其 api 中使用了这个名称...