javascript - ビデオ再生にリスナーを追加する方法

Question

ビデオ再生にリスナーを追加する方法がわかりません。特定の再生時間 (つまり 10 秒) に達すると、最終的に停止するようにします。

私はもう試した：

while( video.currentTime != timeToStop){
            video.play();
        }

しかし、おそらく video.play() を常に開始しているため、ブラウザがハングします。

do while

同じ問題を引き起こします。

じゃあ何を使えばいいの？

Answer 1

ビデオは約束でうまく再生されます。これは、特定の時点で一時停止し、それが発生したときに満たされる約束を返すルーチンです (または、ビデオが他の理由で一時停止するか、終了します)。

function pause_at (video, t) {
    var promise=new Promise ();

    function reached() {
        promise.fulfill (video.currentTime);
        video.removeEventListener ("timeupdate", timeupdate);
        video.removeEventListener ("pause", reached);
    }

    function timeupdate () {
        if (video.currentTime >= t) {
            reached ();
            video.pause ();
        }
    }

    video.addEventListener ("timeupdate", timeupdate);
    video.addEventListener ("pause", reached);
    return promise;
}

使用法：

pause_at (video,60).then (function () {alert ("At 60-second mark!");});
video.play ();

ビデオの終了もビデオの「一時停止」(一時停止イベントが発生した状態) と見なされるため、ビデオの終了時にもプロミスが満たされることに注意してください。

お気に入りの Promise ライブラリで作業したいように微調整してください。ビデオを逆方向に再生したい場合 (マイナスの再生レート)、これを修正する必要があります。:-)