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

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

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

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

【videoタグ】HTMLでWebサイトに動画を埋め込む

Webサイトに動画を埋め込むvideoタグについて解説します。自動再生やループ再生など色々な設定ができるのですがブラウザによって動きが違います。それと動画は画像に比べて容量が大きいのでWebページの表示速度が低下するので3MBを目安にすると良いと言われています。

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)メソッドを付けないとうまくいかないので忘れないように。

実装サンプル

それでコードはこちら

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
コピー
const videoElement = $('.sample_video').get(0);
 
videoElement.addEventListener('ended', function() {
   alert("動画の終了を取得し、アラートを出すようにできます。");
});