一旦我正在播放到我的fancybox中的YouTube视频结束,我正试图发起一个事件.
我有最后一个fancybox版本,我在youtube API上,坚持示例,但似乎ytplayer对象是“未定义”,我无法使其正常工作.
我在互联网上阅读了很多东西,包括这个,这看起来很好：How make fancybox auto close when youtube video id done?
$(".fancybox").fancybox({
'openEffect' : 'none','closeEffect' : 'none','overlayOpacity' : 0.7,'helpers' : {
media : {}
},'afterLoad' : function() {
function onYouTubePlayerReady(playerId) {
//alert(playerId);
//alert(document.getElementById("myytplayer"));
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange","onytplayerStateChange");
}
function onytplayerStateChange(newState) {
//alert("Player's new state: " + newState);
if (newState == 0){
$.fancybox.close(true);
}
}
}
});
// Launch fancybox on first element
$(".fancybox").eq(0).trigger('click');
如果有人得到这个工作,它会很棒！我只是视频关闭fancybox一旦完成！
非常感谢
解决方法
请参阅以下工作代码(您应该使用fancybox的第2版.)
jsfiddle：http://jsfiddle.net/c5h9U/2/
// Fires whenever a player has finished loading
function onPlayerReady(event) {
event.target.playVideo();
}
// Fires when the player's state changes.
function onPlayerStateChange(event) {
// Go to the next video after the current one is finished playing
if (event.data === 0) {
$.fancybox.close();
}
}
// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {
// Initialise the fancybox after the DOM is loaded
$(document).ready(function() {
$(".fancybox")
.attr('rel','gallery')
.fancybox({
openEffect : 'none',closeEffect : 'none',nextEffect : 'none',prevEffect : 'none',padding : 0,margin : 50,beforeShow : function() {
// Find the iframe ID
var id = $.fancybox.inner.find('iframe').attr('id');
// Create video player object and add event listeners
var player = new YT.Player(id,{
events: {
'onReady': onPlayerReady,'onStateChange': onPlayerStateChange
}
});
}
});
// Launch fancybox on first element
$(".fancybox").eq(0).trigger('click');
});
}
