1

YouTube API を使用して、動画の現在の経過時間を取得しています:player.getCurrentTime(); およびplayer.getDuration();関数; jQuery で、最大値が設定され、最小値player.getDurationが 0 に設定されるスライダーを設定しました。

これら 2 つの関数を使用して、次のコードを作成しました。

    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) { ...

私の例では、現在の getCurrentTime() 値とおそらくランダムな値の間で ui.value がちらつくようです? (その値がどこにあるのか正確にはわかりません!しかし、それを修正する良い回避策を知っています);

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);
  }
于 2013-01-09T01:26:04.070 に答える