2013-01-08 145 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

相關問題