javascript youtube iframe 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6857686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
youtube iframe events
提问by joerg P
I try to catch the events of a youtube iframe: http://lab.joergpfeiffer.de/videofull/youtube.php
我尝试捕捉 youtube iframe 的事件：http: //lab.joergpfeiffer.de/videofull/youtube.php
So I call first the api
所以我先调用api
<script type='text/javascript' src='http://www.youtube.com/player_api'></script>
I set the iframe
我设置了 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>
and try to set the events later in
并尝试在稍后设置事件
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'); }
Whatever I do, there are no events fired. And I read the iframe api 10 times. it should work actually.
无论我做什么，都不会触发任何事件。我阅读了 iframe api 10 次。它应该实际工作。
Any idea?
任何的想法？
回答by Adeel
Execute these routines before onYouTubePlayerAPIReady()
在 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);
if stil have confusion then visit http://code.google.com/apis/youtube/iframe_api_reference.html
如果仍有混淆，请访问http://code.google.com/apis/youtube/iframe_api_reference.html
回答by Bob Lund
I did the following.
我做了以下事情。
Started with the example code found at https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
从https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player上的示例代码开始
I then replaced:
然后我替换了：
<div id="player"></div>
with
和
<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 markup found at the same URL)
（在同一 URL 中找到 iframe 标记）
Then I got rid of the origin parameter in the above - that seemed to make things work. BTW, I found that step 2 can be replaced by markup:
然后我去掉了上面的 origin 参数 - 这似乎让事情起作用了。顺便说一句，我发现第 2 步可以用标记代替：
<script src="https://www.youtube.com/iframe_api"></script>
回答by market
Adeel's answer should fix your problem.
Adeel 的回答应该可以解决您的问题。
Google recommend you load the player API script asynchronously, ie, letting the rest of your page load while the script is simultaneously loading.
Google 建议您异步加载播放器 API 脚本，即在加载脚本的同时加载页面的其余部分。
Because you're placing the script tag in your markup early on, the rest of the page isn't executed until that script has been loaded. So when the call is made to onYouTubePlayerAPIReady(), your function hasn't yet been defined.
因为您很早就在标记中放置了脚本标记，所以在加载该脚本之前不会执行页面的其余部分。因此，当调用 onYouTubePlayerAPIReady() 时，您的函数尚未定义。
回答by Antebellum
I have the same problem. It seems to relate to putting the iframe in manually instead of using the div tag substitution. If I use the div method it works fine, manual iframe, no.
我也有同样的问题。这似乎与手动放置 iframe 而不是使用 div 标记替换有关。如果我使用 div 方法它工作正常，手动 iframe，没有。
Async load of the API script, or including it in the head manually didn't make any difference.
API 脚本的异步加载，或手动将其包含在头部没有任何区别。
I have just gone with the div substitution for now, and stopped fighting it.
我现在刚刚使用 div 替换，并停止与它作斗争。
