[JavaScript] videoタグの動画が再生開始/一時停止/再生終了したときにイベント処理をしたい

公開日:2023/11/09

videoタグで設置した動画の挙動に応じてイベント処理を行いたい場合があります。例えば、動画の再生に合わせて計測用の処理を呼び出すといったケースです。

本記事では、オーソドックスな動画の再生、一時停止、再生終了の3パターンでのイベント処理についてサンプルコードを紹介します。

サンプルコード

再生を開始したとき

const videos = document.getElementsByTagName('video');
for(let i = 0; i < videos.length; i++) {
    videos[i].addEventListener('playing', function(event) {
        console.log('playing');
    });
}

画面内に複数のvideoタグがあった場合も考慮して、画面内のすべてのvideoタグをループで回して「playing」イベントにイベントリスナーを登録しています。
「playing」イベントは、一時停止状態から再度再生が開始されたときにも発火する点に注意してください。

一時停止したとき

const videos = document.getElementsByTagName('video');
for(let i = 0; i < videos.length; i++) {
    videos[i].addEventListener('pause', function(event) {
        console.log('pause');
    });
}

一時停止されたときには「pause」イベントが発火されます。

再生を終了したとき

const videos = document.getElementsByTagName('video');
for(let i = 0; i < videos.length; i++) {
    videos[i].addEventListener('ended', function(event) {
        console.log('ended');
    });
}

動画の再生が終了したときには「ended」イベントが発火されます。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。