Youtube iFrame (with javascript API) 第一次加载，但不是第二次。为什么？答案

【问题标题】：Youtube iFrame (with javascript API) loads the first time, but not the second one. Why?Youtube iFrame (with javascript API) 第一次加载，但不是第二次。为什么？
【发布时间】：2013-04-03 12:25:56
【问题描述】：

我正在使用带有以下代码的 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();
  }

【问题讨论】：

第二次运行时 Inspector/Firebug 中显示的错误输出是什么？
在控制台中记录实际上没有错误。我只是在它声明之后鬼混并添加了对 onYouTubeIframeAPIReady() 的调用，现在它一直有效。除了现在我有另一个问题：第一次加载我的页面时，我必须单击两次才能使其工作。我认为原因是 YouTube API 仅第一次调用了 onYouTubeIframeAPIReady() 函数。
它确实记录了通常的“无法将消息发布到youtube.com。收件人的来源127.0.0.1:3000”虽然（通常不是问题，它也是第一次记录它，但无论如何都可以） .我现在正在阅读文档以尝试找到另一个我可以调用自己的函数，并在我第二次和第 n 次调用我的视图时绕过 onYouTubeIframeAPIReady()。但是，如果您对如何使用条件语句实现这一点有任何建议，我会接受的。唯一的限制是 onYouTubeIframeAPIReady 必须保持全局并且似乎不能嵌套。
如果您在 jsfiddle.net 沙箱上设置，可能有助于其他人帮助您进行调试。 JSHint 在这一行抛出错误：videoId: '#{@media['youtube_url']}', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange },
你说得对，是我的错。 '#{@media['youtube_url']}' 是 rails 代码，这就是它不起作用的原因。以后我会用jsfiddle，谢谢。顺便说一句，我解决了问题。

标签： javascript iframe youtube youtube-api

【解决方案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();
};

【讨论】：

完美答案。对于超过 2,700 次观看，我不敢相信没有更多的支持。
工作正常。谢谢

【解决方案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 中使用的名称...

【讨论】：