播放YouTube视频时停止jQuery内容滑块
我正在尝试创建一个jQuery内容滑块,它将在播放YouTube视频时停止,并在视频停止时恢复。类似于上的滑块 中的player.getPlayerState()返回播放器的状态。未启动的视频应返回值-1 我下面的脚本使用returnfalse;如果getPlayerState()返回除-1以外的任何值,则停止幻灯片放映。去掉下面代码中的底部块(后面是//检测播放YouTube视频),它工作正常,但当前不管getPlayerState()值如何,都会触发“return false;” 我使用swfobject嵌入播放器,正如YouTube JavaScript API中推荐的那样。这是一个例子 我必须错误地调用.getPlayerState(),但我不确定如何更正它播放YouTube视频时停止jQuery内容滑块,jquery,video,youtube,youtube-api,Jquery,Video,Youtube,Youtube Api,我正在尝试创建一个jQuery内容滑块,它将在播放YouTube视频时停止,并在视频停止时恢复。类似于上的滑块 中的player.getPlayerState()返回播放器的状态。未启动的视频应返回值-1 我下面的脚本使用returnfalse;如果getPlayerState()返回除-1以外的任何值,则停止幻灯片放映。去掉下面代码中的底部块(后面是//检测播放YouTube视频),它工作正常,但当前不管getPlayerState()值如何,都会触发“return false;” 我使用sw
$(document).ready(function(){
//initial setup
//adds class "last" to last link-tab item
$('.link-tab:last').addClass('last');
//moves summary elements down out of view
$('.rotate-image > div').children('.summary').css({bottom:-150});
//initial variables
var captionAnimationTime = 300;
var captionPauseTime = 4800;
var slideTime = 6000;
//detect playing YouTube video
/* window.setTimeout(function(){
video = document.getElementById("boundless-playground-video");
}
, captionAnimationTime);
*/
//main function
slideSwitch = function(){
var $active = $('.rotate-image > div.active');
if ($active.length == 0) $active = $('.rotate-image > div:last');
var $next = $active.next().length ? $active.next() : $('.rotate-image > div:first');
//sets indexCurrent variable as the index of the next active banner item in the slideshow
var indexCurrent = $next.prevAll().length;
//removes "active" class from link-tab items that already have it
$('.link-tab.active').removeClass('active');
//gives class "active" to next link-tab item
$('.link-tab').eq(indexCurrent).addClass('active');
$active.addClass('last-active');
//function to slide down the caption
captionDown = function(){
$next.children('.summary').animate({bottom:-150}, captionAnimationTime);
}
$next.css({opacity:0.0})
.addClass('active')
.animate({opacity: 1.0}, 700, function(){
//remove classes from the previously active item
$active.removeClass('active last-active');
//animates slide of summary element
$next.children('.summary').animate({bottom: 0}, captionAnimationTime);
window.setTimeout(captionDown, captionPauseTime);
});
//detect playing YouTube video - currently stopping regardless of player state
video = document.getElementById("boundless-playground-video");
if(video.getPlayerState() != -1){
return false;
}
};
//run the function once on document ready to show first slide
slideSwitch();
$(function(){
setInterval( "slideSwitch()", slideTime);
});
})) 拉了很多头发后就解决了。在将YouTube API调用放入
jQuery $(document).ready(function(){
});
我所做的是将YouTube API调用放在jQuery文档的顶部
//playerState variable shows status of YouTube video.
//see http://code.google.com/apis/youtube/youtube_player_demo.html
//currently hardcoded with id of video
function onYouTubePlayerReady(){
ytplayer = document.getElementById('boundless-playground-video');
ytplayer.addEventListener('onStateChange','onytplayerStateChange');
}
function onytplayerStateChange(newState) {
playerState = newState;
}
$(document).ready(function(){
//insert other stuff here
if (typeof (playerState) == 'undefined'){
window.playerState = 5;
}
alert(window.playerState);
});
我认为您需要显示控制滑块的代码。我们可以就API调用提供建议,但不知道您是如何准确实现滑块的。除非代码与给定的链接相同。请将停止jQuery滑块的函数绑定到youtube播放器的“onStateChange”事件(请参见API)。使用我控制滑块的代码更新问题。