【Javascript】動画の一時停止と再生 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から2年以上経過しています。

videoタグの一時停止と再生ボタンを実装したときのメモ

HTML

再生と一時停止ボタンを追加

<div class="movie">
	<video class="pc" src="pc.mp4" type="video/mp4" playsinline autoplay loop muted></video>
	<video class="mobile" src="mobile.mp4" type="video/mp4" playsinline autoplay loop muted></video>
</div>

<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>

JavaScript

一時停止と再生を制御するためのjsを追加。

一時停止ボタンをクリックしたら再生ボタンを表示して動画再生を停止。再生ボタンをクリックしたら一時停止ボタンを表示したら動画を再生する。

<script>
window.addEventListener('DOMContentLoaded', function(){
    const btn_play = document.getElementById("btn_play");
    const btn_pause = document.getElementById("btn_pause");

    // videoタグが複数ある場合、querySelectorAllで全てのvideoタグを取得
    const videoElements = document.querySelectorAll("video");

    // 初期状態ではbtn_playを非表示にする
    btn_play.style.display = "none";

    function playHandler(videoElement) {
        return function() {
            videoElement.play();
            // btn_playを非表示にし、btn_pauseを表示する
            btn_play.style.display = "none";
            btn_pause.style.display = "block";
        };
    }

    function pauseHandler(videoElement) {
        return function() {
            videoElement.pause();
            // btn_pauseを非表示にし、btn_playを表示する
            btn_pause.style.display = "none";
            btn_play.style.display = "block";
        };
    }

    // 各videoタグに対して処理を適用
    videoElements.forEach(function(videoElement) {
        // 初期状態ではbtn_playのクリックリスナーを有効にする
        btn_play.addEventListener("click", playHandler(videoElement));

        // 各videoタグに対してbtn_pauseのクリックリスナーを有効にする
        btn_pause.addEventListener("click", pauseHandler(videoElement));
    });
});
</script>