ミギムキ

[JavaScript] videoタグの動画読み込み中にローディングアニメーションを表示したい

動画の読み込み中表示

サイトのTOPページには動画を置くのが当たり前になってきました。一昔前まで定番だったスライダーよりも目を引きやすいですし、引き留めやすいので、会社の特長やサービスのコンセプトが伝わりやすくなります。

ただ、再生時間の長い動画などはどうしても読み込み時間が長くなってしまい、モバイルでのアクセス時など接続環境によってはなかなか動画が始まらない、といったことになりがちです。

動作イメージ

動画の読み込み中はポスター画像を暗めにして、読み込み中アニメーションの画像を表示します。

サンプルコード

html

<div class="video_wrapper"> <video src="movie.mp4" poster="poster.jpg" muted loop playsinline autoplay></video> </div>
スポンサー広告

CSS

.video_wrapper { position: relative; } .video_wrapper:not(.js_active)::before { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.5); content: ""; } .video_wrapper:not(.js_active)::after { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 60px; height: 60px; background-image: url(./loading.png); background-repeat: no-repeat; background-position: center; background-size: contain; content: ""; } .video_wrapper > video { width: 100%; }

JavaScript

document.addEventListener('DOMContentLoaded', function() { const videoWrappers = document.getElementsByClassName('video_wrapper'); for(let i = 0; i < videoWrappers.length; i++) { const videoWrapper = videoWrappers[i]; const video = videoWrapper.getElementsByTagName('video')[0]; video.addEventListener('canplay', function() { videoWrapper.classList.add('js_active'); }, false); } }, false);

サンプルコードの解説

動画読み込み中のスタイル指定

.video_wrapper:not(.js_active)::before { 〜 } .video_wrapper:not(.js_active)::after { 〜 }

videoタグを囲む「video_wrapper」クラスのbefore/after疑似要素を使って、読み込み中の表示を行います。

before疑似要素で動画全面を半透明の塗りつぶしをして、after疑似要素で読み込み中のpng画像を表示しています。

読み込み中の画像は、こちらのサイトで色々なパターンから選んで作成できます。

サンプルで使用している読み込み中画像はこちらからダウンロードできます。

動画の読み込みが完了すると「video_wrapper」クラスに「js_active」というクラスが付与されます。

このクラスが付与されていない間に読み込み中表示をさせたいので「:not(.js_active)」というセレクタを使ってスタイルを指定しています。

動画の読み込み完了イベントを検知する

const video = videoWrapper.getElementsByTagName('video')[0]; video.addEventListener('canplay', function() { videoWrapper.classList.add('js_active'); }, false);
スポンサー広告

videoタグには「動画の再生が終わった」「一時停止された」などの色々なイベントが用意されています。

これらのイベントに「addEventListener」を行うことで、動画の状態に合わせたイベント処理が可能になります。

今回は動画の読み込み完了を検知する「canplay」というイベントに「addEventListener」を行い「video_wrapper」クラスに「js_active」クラスを付与しています。

ご質問を受け付け中。24時間以内にお返事します

記事の中でわからなかったところ、もっと知りたかったことなど、お気軽にお問い合わせください。原則、24時間以内にお返事させていただきます。

お問い合わせは下記フォームより送信いただくか、ツイッターアカウント@flat8migiにDMをお送りください。

スポンサー広告