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。它应该实际工作。

有什么想法吗？

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

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>

（在同一网址找到iframe标记）

然后我摆脱了上面的原始参数 - 这似乎使事情有效。顺便说一句，我发现第2步可以用标记代替：

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

Answer 3

阿德尔的答案应该解决你的问题。

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

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

Answer 4

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

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

我刚刚接受了div替换，并且停止了战斗。

youtube iframe活动

4 个答案: