Javascript YouTube API — 不触发“onYouTubePlayerReady()”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2083128/
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 API — not firing 'onYouTubePlayerReady()'
提问by Ashley Williams
From what I've read, this is how I should setup the YouTubeAPI:
根据我的阅读，这是我应该如何设置YouTubeAPI：
<!DOCTYPE html>
<html lang="en">
<head>
<meta content='text/html;charset=UTF-8' http-equiv='content-type' />
<title>Youtube Player</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function onYouTubePlayerReady(id) {
console.log("onYouTubePlayerReady() Fired!");
var player = $("#youtube_player").get(0);
}
var params = { allowScriptAccess: "always" };
var atts = { id: "youtube_player" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1",
"youtube", "425", "356", "8", null, null, params, atts);
</script>
</head>
<body>
<div id="youtube"></div>
</body>
</html>
However, 'onYouTubePlayerReady()' doesn't fire at all, and if I manually get a reference to the player, a lot of methods are undefined; for example, cueVideoById() works, but playVideo() doesn't.
但是，'onYouTubePlayerReady()' 根本不会触发，如果我手动获取对播放器的引用，很多方法都未定义；例如，cueVideoById() 有效，但 playVideo() 无效。
How can I fix this problem?
我该如何解决这个问题？
回答by Pekka
You need to be on a web server with your test script, as stated in the documentation:
您需要使用测试脚本在 Web 服务器上，如文档中所述：
Note: To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet.
注意：要测试任何这些调用，您必须在网络服务器上运行您的文件，因为 Flash 播放器会限制本地文件和 Internet 之间的调用。
回答by Otto Kovarik
this function:
这个功能：
function onYouTubePlayerReady(playerid) {
console.log('readyIn');
};
don't have to be directly in head in separate script tag.
不必直接在单独的脚本标签中。
Only rule you have to keep is: don't put this function inside domready event - it has to be defined sooner.
您必须遵守的唯一规则是：不要将此函数放在 domready 事件中 - 它必须尽快定义。
For example in mootools I use it like this:
例如在 mootools 我这样使用它：
function onYouTubePlayerReady(playerid) {
echo('readyIn');
};
document.addEvent('domready', function() {
...
});
回答by Tosh
I consider this the best way of adding a youtube video to your website with javascript. It gives you a very clear way of dealing with events. It works on a local machine, and as far as I know it works on apple devices. You can use all the events and function described in the javascript documentation for the youtube api.
我认为这是使用 javascript 将 youtube 视频添加到您的网站的最佳方式。它为您提供了一种非常清晰的处理事件的方式。它适用于本地机器，据我所知它适用于苹果设备。您可以使用 youtube api 的 javascript 文档中描述的所有事件和函数。
<div id="player"></div>
<script>
//Load player api 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);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
source: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
来源：http: //apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
回答by augurone
I have the answer, separate out this portion of the script and put it in the head in its own script tag. OMG, finally
我有了答案，将脚本的这一部分分开，并将其放在自己的脚本标签中。OMG，终于
<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
ytp = document.getElementById('ytplayer');
ytp.mute();
};
</script>
回答by Uberbug
<!DOCTYPE html>
had to lead the page in order for the html5 stuff to function for me in FF4
必须引导页面才能让 html5 的东西在 FF4 中为我工作
回答by Eric Corriel
If you're embedding youtube videos like so:
如果您像这样嵌入 YouTube 视频：
<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
then you should place
那么你应该放置
<script src="http://www.youtube.com/player_api"></script>
after the </iframe>. At least that's how I got it to work.
在 </iframe> 之后。至少这就是我让它工作的方式。
Additionally, if you're dynamically changing the [src] attribute of the iframe via jQuery or whatever to load a new video then you need to call onYouTubePlayerAPIReady()after it has loaded.
此外，如果您通过 jQuery 或其他任何方式动态更改 iframe 的 [src] 属性以加载新视频，则需要onYouTubePlayerAPIReady()在加载后调用。
I prefer to change the [src] attribute and then:
setTimeout(onYouTubePlayerAPIReady, 500);
我更喜欢更改 [src] 属性，然后：
setTimeout(onYouTubePlayerAPIReady, 500);
回答by Philipp Lenssen
Just had the same issue, but for another reason. It worked in Chrome but not Firefox, and the reason was that I had a http header "Content-type: text/xml" instead of "Content-type: text/html". Serving as HTML now fires the onYouTubePlayerReady event in Firefox, too.
刚刚有同样的问题，但出于另一个原因。它适用于 Chrome 而不是 Firefox，原因是我有一个 http 标头“Content-type: text/xml”而不是“Content-type: text/html”。现在作为 HTML 也会在 Firefox 中触发 onYouTubePlayerReady 事件。
Just posting this in case someone stumbles on this answer from Google (like I just did when trying to find a solution).
只是发布这个以防有人偶然发现谷歌的这个答案（就像我在试图找到解决方案时所做的那样）。
