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

Question

我正在使用带有以下代码的 iFrame Youtube API。我使用 Ajax 调用此 View 以呈现它并将其附加到我页面中的 div.yt-player 中。它在我第一次调用 View 时有效，但在我关闭视频(清空 div.yt-player)并单击另一个调用我的 View 的链接后，视频根本无法加载(空白)。我一直在努力，但仍然不明白为什么会这样，尤其是它第一次起作用。非常感谢任何形式的帮助。谢谢。

PS: html 和 javascript 都是由 View 渲染的。

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