web-dev-qa-db-ja.com

指定された時間にHTML5ビデオを停止する

ページにHTML5ビデオ要素があります。再生したい動画の再生時間が1分です。

ビデオの分1から分5まで再生する必要があります。
currentTimeプロパティを設定することで、特定の時間から起動できます。
しかし、jQueryまたはJavaScriptの特定の時間にビデオを停止するにはどうすればよいですか？

javascriptjqueryhtml5-video
15
Arvin

TL; DR：単に聴く "timeupdate" ：

video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();
    }
});

JavaScriptで何かを待つ通常の方法は、イベントまたはタイムアウトを待つことです。この場合、タイムアウトは問題外です。ユーザーが自分でビデオを一時停止する可能性があります。この場合、ストップはあなたの特定の時間ではなく、より早いです。

定期的に時間をチェックすることもコストがかかりすぎます。チェックする頻度が高すぎる（したがって貴重な処理能力を浪費する）か、頻度が足りないため、正しい時刻に停止しません。

ただし、currentTimeはチェック可能なプロパティであり、幸運にも、メディア要素のtimeupdateイベントがあります。これは次のように説明されます。

現在の再生位置が、通常の再生の一部として、または特に不連続に、特に興味深い方法で変更されました。

これは、単にtimeupdateをリッスンして、マークに合格したかどうかを確認できることを示しています。

// listen on the event
video.addEventListener("timeupdate", function(){
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(this.currentTime >= 5 * 60) {
        // pause the playback
        this.pause();
    }
});

これは、ユーザーが過去5分間スキップしようとするたびに一時停止することに注意してください。スキップを許可し、最初に5分を超えてのみビデオを一時停止したい場合は、イベントリスナーを削除するか、なんらかのフラグを導入します。

var pausing_function = function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();

        // remove the event listener after you paused the playback
        this.removeEventListener("timeupdate",pausing_function);
    }
};

video.addEventListener("timeupdate", pausing_function);
38
Zeta

以下のように

<video id="myVid">
<source></source> <!--Whatever source here -->
</video>

上記のHTMLを使用してイベントを添付

var vid = document.getElementById("myVid");
vid.addEventListener("timeupdate", function(){
// Check you time here and
if(t >= 300000) //Where t = CurrentTime
{
vid.stop();// Stop the Video
}
});

これは正しいやり方です。

0
Akshay Khandelwal

timeupdateイベントは探しているものですが、約2 fpsでのみ発火するため、遅すぎて正確な時間に停止できません。

これらのケースでは、60 fpsで作動するrequestAnimationFrameを使用し、endTimeを少し減らして小さな「ラグホップ」を修正しました。

const onTimeUpdate = () => {
    if (video.currentTime >= (endTime - 0.05)) {
      video.pause()
    } else {
      window.requestAnimationFrame(onTimeUpdate)
    }
}
window.requestAnimationFrame(onTimeUpdate)
0
Fabian von Ellerts