youtube iframe 事件答案

【问题标题】：youtube iframe eventsyoutube iframe 事件
【发布时间】：2011-10-15 00:30:06
【问题描述】：

我尝试捕捉 youtube iframe 的事件： http://lab.joergpfeiffer.de/videofull/youtube.php

所以我先调用 api

<script type='text/javascript' src='http://www.youtube.com/player_api'></script>

我设置了 iframe

<iframe id="ytfullplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/p/B93C3D017CB2D65A?enablejsapi=1&origin=lab.domain.de" frameborder="0" ></iframe>

并尝试在稍后设置事件

var ytfullplayer;
    function onYouTubePlayerAPIReady() {
        console.log('onYouTubePlayerAPIReady');
        ytfullplayer = new YT.Player('ytfullplayer', {
            events: {
              'onReady': testfunc,
              'onPlaybackQualityChange': testfunc,
              'onStateChange': testfunc,
              'onError': testfunc
            }
        });

    }
    function testfunc(){ alert('hello'); }

无论我做什么，都不会触发任何事件。我读了 iframe api 10 次。它应该确实有效。

有什么想法吗？

【问题讨论】：

标签： javascript events iframe youtube

【解决方案1】：

在 onYouTubePlayerAPIReady() 之前执行这些例程

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

如果仍有疑惑，请访问http://code.google.com/apis/youtube/iframe_api_reference.html

【讨论】：

我遇到了同样的问题，这个解决了。

【解决方案2】：

我做了以下。

从https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player的示例代码开始

然后我换了：

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

与

<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>

（在同一 URL 找到 iframe 标记）

然后我摆脱了上面的 origin 参数 - 这似乎使事情正常进行。 BTW，我发现第2步可以用标记代替：

<script src="https://www.youtube.com/iframe_api"></script>

【讨论】：

第 2 步中的原始脚本旨在异步加载 frame_api。如果你使用

【解决方案3】：

Adeel 的回答应该可以解决您的问题。

Google 建议您异步加载播放器 API 脚本，即在脚本同时加载的同时加载页面的其余部分。

因为您很早就在标记中放置了脚本标记，所以在加载该脚本之前不会执行页面的其余部分。因此，当调用 onYouTubePlayerAPIReady() 时，您的函数尚未定义。

【讨论】：

【解决方案4】：

我也有同样的问题。它似乎与手动放入 iframe 而不是使用 div 标签替换有关。如果我使用 div 方法，它可以正常工作，手动 iframe，不会。

API 脚本的异步加载，或手动将其包含在头部中没有任何区别。

我现在刚刚使用了 div 替换，并且不再与之抗争了。

【讨论】：