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>