YouTube（注入）video结束回拨

我将YouTube iframe注入文档中的div并将其绑定到click：

jQuery(document).ready(function($) { jQuery('.video-thumb').click(function(){ ... $('#player').html(''); ... } } 

我希望在video结束时进行回调。 我已经阅读了关于onYouTubePlayerAPIReady ，但它必须放在文件外面。

我试图通过这种结构加载video播放器，准备好文件：

 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 } }); } 

但我遇到了一些问题：

• showinfo：0不起作用，最后还有其他video缩略图
• 我不知道如何更改videoID（并重新启动video？）
• 比第一种方法更多的脚本错误（注入iframe）

我更喜欢使用第一种方法，但如何创建video结束回调？ 谢谢。

Answer 1

以下代码的工作示例也在jsfiddle.net上 。

一些说明：

• 使用iframe_api ，而不是javascript_api
• YT.Player构造函数很小，因为您自己构建iframe。
• “playerVars”包含在iframeurl参数中。
• 设置参数“enablejsapi = 1”。

示例标记

   Megadeth: Back In The Day   Judas Priest: Metal Gods   Baltimora: Tarzan Boy  
 
--Logging enabled-- 

JavaScript

 function log(msg) { jQuery('#log').prepend(msg + '
'); } 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(''); new YT.Player('player_'+vidId, { events: { 'onStateChange': onPlayerStateChange } }); }); });