Youtube 播放器 API 和 jQuery 滑块

Question

我正在使用 YouTube API 来获取视频的当前播放时间：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);
      }
    }

Answer 1

所以，这可能对其他人有所帮助。我发现在运行这段代码时：

    $("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);
  }