FancyBox 和 Youtube API 事件 [英] FancyBox and Youtube API events
问题描述
我正在尝试在我的幻想箱中播放的 youtube 视频结束后触发一个事件.
I'm trying to fire an event once the youtube video that I'm playing into my fancybox is ended.
所以我可以在视频结束后自动关闭fancybox.
So I can close automatically the fancybox once the video is over.
我有最后一个 fancybox 版本,我在 youtube API 上,坚持使用示例,但似乎 ytplayer 对象是未定义的",我无法使其正常工作.
I have the last fancybox version and I'm on the youtube API, sticking to exemples but it seems that ytplayer object is "undefined" and I can't make it work properly.
我在互联网上阅读了很多东西,包括这个,这似乎很好:当 youtube 视频 id 完成后如何让 fancybox 自动关闭?
I have read a lot of stuffs on internet including this one, which seems to be good: How make fancybox auto close when youtube video id done?
这是我正在使用的代码:JsFiddle
This is the code I'm using: JsFiddle
$(".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的视频!
If someone get this working, it would be awesome ! I just the video to close the fancybox once it finished !
非常感谢
推荐答案
请看下面的工作代码(你应该使用fancybox的版本2.)
Please see following working code (you should use version 2 of fancybox.)
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');
});
}
这篇关于FancyBox 和 Youtube API 事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!