1

我正在使用 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);
      }
    }
4

1 回答 1

0

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

    $("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);
  }
于 2013-01-09T01:26:04.070 回答