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.
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屋!