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（）值和一个可能的随机值之间闪烁？（我不知道该值的确切位置！但我知道一个很好的解决方法可以解决这个问题）;

所以我制作了一个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);
  }

Youtube播放器API和jQuery滑块

1 个答案: