[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」クラスを付与しています。
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。