2

ユーザーがサイドパネルでアクションを実行し、ビデオでアクションが発生するインタラクティブビデオ (一種のゲーム) をプログラミングしています。

部分的には、ビデオはパネルでのユーザー アクションを待っているため、ユーザーがアクションを開始するまでループする必要があります。

15 秒で、ユーザーがアクションを行わない限り 11 秒に戻ります。動画は完全なループになるように設計されています。

私のループは機能していますが、問題はシームレスではないということです。15 秒で 1 秒ほど停止し、11 秒で再開します。シームレスに動作させる方法はありますか？

私は VideoJS を使用しています。これが私のコードです：

var video_decor = _V_("video_decor");
video_decor.addEvent("timeupdate", function(){
    var whereYouAt = video_decor.currentTime();
    console.log(whereYouAt);
    if(whereYouAt > 15){
        video_decor.currentTime(11);
    }
});
4

1 に答える 1

3

シームレス ループを行う最も簡単な方法は、動画全体を使用し、「終了」イベントが最初に戻るのを待つことです。それはかなりスムーズになる傾向があるので、それを実現できるのであれば、それが最善の方法です.

ブラウザはミリ秒ごとに「timeupdate」イベントをトリガーしないため、ビデオのサブセクションを取得してループするのは困難であり、これを行うのは非常に非効率的です。代わりに、15 (Chrome/Safari) または 250 (Firefox) ミリ秒ごとに timeupdate をトリガーするため、それが誤差の範囲です。より短い間隔で独自のタイマー (setInterval) を作成し、時間を手動で確認することもできますが、これはブラウザーに大きな負荷をかける可能性があります。

于 2012-08-02T18:21:43.243 に答える