我在幻灯片放映中嵌入了YouTube视频(使用Cycle Plugin的MaxImage),一旦用户单击下一张幻灯片,我就会尝试暂停。 HTML5视频有一个内置功能,但是我不确定如何在YouTube上做同样的事情。谢谢!
注意之前和之后的功能。
$(function(){
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 600,
timeout: 0,
prev: '.prev',
next: '.next',
pause: 1,
before: function(last,current){
if(!$.browser.msie){
// Start HTML5 video when you arrive
if($(current).find('video').length > 0) $(current).find('video')[0].play();
}
},
after: function(last,current){
if(!$.browser.msie){
// Pauses HTML5 video when you leave it
if($(last).find('video').length > 0) $(last).find('video')[0].pause();
}
},
onFirstImageLoaded: function(){
jQuery('#loader').hide();
jQuery('#maximage').fadeIn(200);
}
});
});
最佳答案
您需要使用iFrame API,否则由于跨域策略,您无法与视频互动:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 600,
timeout: 0,
prev: '.prev',
next: '.next',
pause: 1,
before: function(last,current){
if(player != null) player.playVideo()
},
after: function(last,current){
if(player != null) player.pauseVideo()
},
onFirstImageLoaded: function(){
jQuery('#loader').hide();
jQuery('#maximage').fadeIn(200);
}
});
关于jquery - 使用循环插件在下一张幻灯片上暂停youtube视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17717048/