2013-01-08 164 views
1

我使用YouTube API来获取视频的当前流逝时间:player.getCurrentTime();和player.getDuration();功能;我在jQuery中设置了一个滑块,它将最大值设置为player.getDuration,最小值设置为0;

使用这两个函数我已经建立了下面的一段代码:
Youtube播放器API和jQuery滑块

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); 
     } 
    } 

回答

0

因此,这可能会帮助其他人。我已经发现,运行这段代码时:

$("progressbar").on('slidechange',function(event,ui) { ... 

似乎ui.value当前getCurrentTime()值和可能之间的随机值我的例子中闪烁? (我不确切知道这个价值在哪里!但我知道一个很好的解决方法,可以解决这个问题);

SO我已保持在每个第二玩家当前时间的var和只是由滑块的该随机闪烁值传递如下:

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); 
    } 
+0

咩。糟糕的决定面团。我已经为改善进度条做了一个新的途径。我会在今天晚些时候更新代码。 – roshkattu

相关问题