YouTube iframe 事件

Question

我尝试捕捉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'); }

无论我做什么，都没有触发任何事件。我读了10遍iframe API，它实际上应该可以工作。

有什么想法吗？

- joerg P

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

- Adeel

---

我有同样的问题，这个解决了它。 - mimrock

Answer 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标记)

然后我删除了上面的原点参数-这似乎使事情正常工作。顺便说一句，我发现步骤2可以用标记替换：

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

- Bob Lund

---

第二步中的原始脚本旨在异步加载frame_api。 如果使用<script>标签，它将阻止浏览器渲染，直到脚本加载完成。 - Danny R

Answer 3

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

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

现在我只是采用了div替换，并停止了抗争。

- Antebellum

Answer 4

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

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

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

- market

Answer 5

还有一个&enablejsapi=1，需要在创建嵌入式播放器时完成-否则API将忽略您的JS端。

- AgeingBrit

---

你的回答可以通过添加更多支持信息来改善。请编辑并添加进一步的细节，例如引用或文档，以便其他人可以确认你的回答是正确的。你可以在帮助中心中找到有关撰写良好答案的更多信息。 - Community