youtube 播放器 iframe 的非动态插入不会触发事件

Question

我正在使用 youtube 的 iframe api

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

我想手写<iframe>标签（不是异步插入）。文档表明这是可能的

If you do write the tag, then when you construct the YT.Player object, you do not need to specify values for the width and height, which are specified as attributes of the tag(...)

但是当我直接插入<iframe>标签时

  <iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

并移除动态标签生成

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

（以及创建新播放器实例时选项中的宽度、高度和 ID）

我无法调用 onYouTubeIframeAPIReady 函数。我试过使用脚本标签的动态插入并且它有效。文档有点不清楚当你不动态插入时需要什么 - 所以我很感激你的建议

谢谢

Answer 1

当您的 iframe 元素已经出现在页面上时，您仍然需要加载 iframe javascript 库，因为它是调用 onYouTubeIFrameAPIReady 的库。所以你的代码应该是这样的：

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

<script>
      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', {
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
</script>

请注意，在这种情况下，您传递给 onYouTubeIFrameAPIReady 的值是您的 iframe 的 ID，而不是 div 的 ID ...库将识别这是一个 iframe并连接到现有视频，而不是尝试为您动态生成 iframe。

youtube 播放器 iframe 的非动态插入不会触发事件

Non-dynamic insertion of youtube player iframe doesn't fire events

html

javascript

youtube

iframe

youtube-api