Home
CSS
videoタグの再生や停止などをJSでコントロールする方法

videoタグの再生や停止などをJSでコントロールする方法

公開日
2021.10.03
更新日
2022.04.02
videoタグの再生や停止などをJSでコントロールする方法

どうも!かけちまるです!

サイトのメインビジュアルに背景動画を使うことがあると思います。
背景動画はループ自動再生がほぼ必須だと思いますが、オープニングアニメーションを実装した時に背景動画は自動再生しているのでユーザーには途中から始まったように見えてしまいます。

細かいことなのですが、この現象を解決したいと思いオープニングアニメーションが終了するのに合わせて背景動画を再生する方法をまとめました。

この記事では、

  • ・videoタグの開始、停止の制御
  • ・videoタグ音声のON、OFFの切り替え
  • ・videoタグの終了を取得する方法

がわかります。

videoタグをループで自動再生にする書き方

videoタグを背景動画として使うには、ループ再生と自動再生は必要だと思うので簡単ですが以下にコードを載せときます。
src=”〇〇.mp4”部分を変えて活用してください。

HTML
コピー
<video src="〇〇.mp4" autoplay muted loop playsinline></video>

もっと知りたい方は、videoタグについてまとめた記事があるので読んでみてください。

videoタグの再生と停止の制御

JavaScriptの2つのメソッドを使います。

  • ・.play() ・・・ 動画を再生させる
  • ・.pause() ・・・ 動画を停止させる

ポイントとしては、JavaScriptでvideoタグを取得するときは.get(0)メソッドを付けないとうまくいかないので忘れないように。

実装サンプル

再生
一時停止

それでコードはこちら

HTML
コピー
<video class="sample_video" src="./video/sample.mp4" autoplay muted loop playsinline></video> <div class="sample_play_btn">再生</div> <div class="sample_pause_btn">一時停止</div>
JavaScript
コピー
const videoElement = $('.sample_video').get(0); $('.sample_play_btn').on('click', function(){ videoElement.play(); }); $('.sample_pause_btn').on('click', function(){ videoElement.pause(); });

videoタグ音声のONとOFFの切り替え

JavaScriptの2つのメソッドを使います。

  • ・.muted = false; ・・・ ミュート解除
  • ・.muted = true; ・・・ ミュート

ポイントとしては、JavaScriptでvideoタグを取得するときは.get(0)メソッドを付けないとうまくいかないので忘れないように。

実装サンプル

ON
OFF

それでコードはこちら

HTML
コピー
<video class="sample_video" src="./video/sample.mp4" autoplay muted loop playsinline></video> <div class="sample_play_btn">ON</div> <div class="sample_pause_btn">OFF</div>
JavaScript
コピー
const videoElement = $('.sample_video').get(0); $('.sample_play_btn').on('click', function(){ videoElement.muted = false; }); $('.sample_pause_btn').on('click', function(){ videoElement.muted = true; });

videoタグの終了を取得する方法

JavaScriptのイベントを使ってvideoタグの終了を取得します。

  • ・endedイベント ・・・ メディアの終了時に発生する

ポイントとしては、JavaScriptでvideoタグを取得するときは.get(0)メソッドを付けないとうまくいかないので忘れないように。

実装サンプル

※動画が終了すると、アラートが表示されます。
再生

それでコードはこちら

HTML
コピー
<video class="sample_video" src="./video/sample.mp4" autoplay muted controls></video>
JavaScript
JavaScript
コピー
const videoElement = $('.sample_video').get(0); videoElement.addEventListener('ended', function() { alert("動画の終了を取得し、アラートを出すようにできます。"); });

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【WordPress】カテゴリーの記事数を取得する方法

【WordPress】カテゴリーの記事数を取得する方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

【WPプラグイン不使用】目次を自動生成する方法

【WPプラグイン不使用】目次を自動生成する方法

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開