Javascript Youtube播放器API和jQuery滑块
我正在使用YouTube API获取视频的当前运行时间:Javascript Youtube播放器API和jQuery滑块,javascript,jquery,youtube-javascript-api,Javascript,Jquery,Youtube Javascript Api,我正在使用YouTube API获取视频的当前运行时间:player.getCurrentTime()和player.getDuration()功能;我在jQuery中设置了一个滑块,将最大值设置为player.getDuration,最小值设置为0 使用这两个函数,我构建了以下代码: var progress = setInterval(function(){ $("#progressbar").slider({value: Math.floor(player.getCu
player.getCurrentTime()
和player.getDuration()代码>功能;我在jQuery中设置了一个滑块,将最大值设置为player.getDuration
,最小值设置为0
使用这两个函数,我构建了以下代码:
var progress = setInterval(function(){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
},1000);
这将用Youtube视频的运行时间更新滑块
问题是,当我暂停视频时,滑块的值在先前的值和当前经过的时间(player.getCurrentTime()
)值之间闪烁
有人能解释一下吗
编辑:以下是在播放器播放状态下更新滑块并在播放器暂停状态下停止更新功能的正确代码:
function playerStateChange(newState) {
globalYtState = newState;
if(newState == 0){
$("#hSongSearcher").val('').trigger('keyup');
setTimeout(playNextVideo(),1500);
}
if(newState == 2){
clearInterval(progressUpdater);
}
if(newState == 1){
progressUpdater = setInterval(function(){
//console.log(Math.floor(player.getCurrentTime()));
if(Math.floor($("#progressbar").slider('value')) != Math.floor(player.getCurrentTime())){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
}
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}
}
所以,这可能会帮助其他人。我发现在运行这段代码时:
$("progressbar").on('slidechange',function(event,ui) { ...
在我的示例中,ui.value似乎在当前getCurrentTime()值和可能的随机值之间闪烁?(我不知道该值的确切位置!但我知道一个很好的解决方法可以解决这个问题)
所以我做了一个变量,它每秒钟保存玩家的当前时间,只需通过滑块的随机闪烁值,如下所示:
if(newState == 1){
progressUpdater = setInterval(function(){
ctime = Math.floor(player.getCurrentTime());
$("#progressbar").slider("value", ctime);
//Here starts the flickering fix
$("#progressbar").on('slidechange',function(event,ui){
//Fix Flcikering;
if(ui.value < ctime){
$("#progressbar").slider("value", ctime);
}
});
//And here it ends.
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}
if(newState==1){
progressUpdater=setInterval(函数(){
ctime=Math.floor(player.getCurrentTime());
$(“#进度条”)。滑块(“值”,ctime);
//这里开始闪烁的修复
$(“#progressbar”).on('slidechange',函数(事件,ui){
//固定填料;
if(ui.value
Meh。糟糕的决定。我用了一种新的方法来改善进度条。今天晚些时候我会更新代码。