動画ファイルの再生、一時停止を操作する

ページ上で動画ファイルを再生／一時停止する

サイトのページ上でMPEG4形式、WebM形式、MOV形式などの動画ファイルを再生したり一時停止するときは、video要素をJavaScriptからアクセスして制御します。
再生をするときはplayメソッド、一時停止はpauseメソッドを使います。

サンプルコードはこちら

以下のHTMLではvideo要素からMOV形式の動画ファイルを読み込み、JavaScriptから再生と一時停止ができるように2つのbutton要素を用意します。

HTML コード例

<video type="video/webm" src="./movie/swiss.mov" muted></video>
<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>

video要素に指定しているmuted属性は消音（ミュート）に設定することができます。
音を出した状態で再生するときはこの属性は取り除いてください。

続いて、JavaScriptでbutton要素が押された時に再生や一時停止ができるように設定します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const btn_play = document.getElementById("btn_play");
  const btn_pause = document.getElementById("btn_pause");
  const videoElement = document.querySelector("video");

  btn_play.addEventListener("click", e => {
    videoElement.play();
  });

  btn_pause.addEventListener("click", e => {
    videoElement.pause();
  });
});

id属性を使って再生ボタンの「btn_play」と一時停止ボタンの「btn_pause」を取得し、さらにvideo要素をquerySelectorメソッドで取得します。

再生ボタン「btn_play」はクリックされたらplayメソッドを実行することで再生を開始します。

そしてもう1つの一時停止ボタン「btn_pause」はpauseメソッドを実行し、現在の再生位置で一度再生をストップします。
一時停止中にもう一度再生ボタンを押すと再生を再開することができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。