javascript YouTube（注入）视频结束回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12107202/
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 (injected) video ends callback
提问by Jeaf Gilbert
I inject YouTube iframe to a div in document ready and bind it to click:
我将 YouTube iframe 注入到准备好的文档中的 div 并将其绑定到单击：
jQuery(document).ready(function($) {
jQuery('.video-thumb').click(function(){
...
$('#player').html('<iframe width="761" height="421" src="http://www.youtube.com/embed/' + $(this).attr('videoid') + '?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
...
}
}
And I want to do a callback when video ends. I have read about onYouTubePlayerAPIReady, but it has to be put outside document ready.
我想在视频结束时进行回调。我已经阅读了onYouTubePlayerAPIReady，但它必须放在文档之外。
I have tried to load video player by this construction outside document ready:
我试图通过这种结构外文件准备加载视频播放器：
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '421',
width: '761',
videoId: '',
playerVars: { autoplay: 1, autohide: 1, showinfo: 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
but I got some issues:
但我遇到了一些问题：
- showinfo:0 didn't work, still got other video thumbnails in the end
- I don't know how to change video id (and reinit the video?)
- more script errors than first method (injecting iframe)
- showinfo:0 没用，最后还是有其他视频缩略图
- 我不知道如何更改视频 ID（并重新启动视频？）
- 比第一种方法更多的脚本错误（注入 iframe）
I prefer using first method, but how to create video ends callback? Thanks.
我更喜欢使用第一种方法，但如何创建视频结束回调？谢谢。
回答by Joe Coder
A working example of the below code is also on jsfiddle.net.
以下代码的工作示例也在jsfiddle.net 上。
Some notes:
一些注意事项：
- Uses the iframe_api, not the javascript_api
- The YT.Player constructor is minimal because you are building the iframe yourself.
- The "playerVars" are included as iframe URL parameters.
- The parameter "enablejsapi=1" is set.
- 使用iframe_api，而不是javascript_api
- YT.Player 构造函数很小，因为您是自己构建 iframe。
- “playerVars”作为 iframe URL 参数包含在内。
- 设置了参数“enablejsapi=1”。
Example Markup
示例标记
<script src="http://www.youtube.com/iframe_api"></script>
<a style="display: block;" class="video-thumb" id="HuGbuEv_3AU" href="#">
Megadeth: Back In The Day
</a>
<a style="display: block;" class="video-thumb" id="jac80JB04NQ" href="#">
Judas Priest: Metal Gods
</a>
<a style="display: block;" class="video-thumb" id="_r0n9Dv6XnY" href="#">
Baltimora: Tarzan Boy
</a>
<div id="container"></div>
<div id="log">--Logging enabled--</div>
The JavaScript
JavaScript
function log(msg) {
jQuery('#log').prepend(msg + '<br/>');
}
function onPlayerStateChange(event) {
switch(event.data) {
case YT.PlayerState.ENDED:
log('Video has ended.');
break;
case YT.PlayerState.PLAYING:
log('Video is playing.');
break;
case YT.PlayerState.PAUSED:
log('Video is paused.');
break;
case YT.PlayerState.BUFFERING:
log('Video is buffering.');
break;
case YT.PlayerState.CUED:
log('Video is cued.');
break;
default:
log('Unrecognized state.');
break;
}
}
jQuery(document).ready(function($) {
$('.video-thumb').click(function() {
var vidId = $(this).attr('id');
$('#container').html('<iframe id="player_'+vidId+
'" width="420" height="315" src="http://www.youtube.com/embed/'+
vidId+'?enablejsapi=1&autoplay=1&autohide=1&showinfo=0" '+
'frameborder="0" allowfullscreen></iframe>');
new YT.Player('player_'+vidId, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
});
