この記事では、JavaScriptでページ表示時に全画面で動画を再生し、動画終了時にフェードアウトさせて削除する方法を紹介します。
脱jQueryしたいので、素のJavaScriptで実装していこうと思います。
案件で実装したことの備忘録です。
コード
コードはこちら。
HTML・CSS
<video id="load_movie" muted playsinline>
<source src="./hogehoge.mp4" type="video/mp4">
<source src="./hogehoge.webm" type="video/webm">
</video>#load_movie {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background: #FFF;
z-index: 9999999999;
}HTMLはvideo要素に表示したい動画ファイルのパスを指定します。
今回は案件の都合上mp4とwebmを用意しましたが、MP4のみでも問題ありません。
videoタグはブラウザの仕様上、muted属性を付与しないと自動再生されません。また、iOSではplaysinline属性を付与しないとタッチして全画面表示で再生する必要があります。
今回、videoタグにautoplay属性は付与しませんが、JSで動画再生に使用するplay()メソッドはautoplay属性と同様にブラウザの動画再生ポリシーが適用されるので、muted属性とplaysinline属性を付与しておきましょう。
CSSは動画を最上階のレイヤーに全画面で表示するための指定になります。
背景色はお好みで指定してください。
JavaScript
const loadMovie = document.getElementById("load_movie");
// ページ読み込み完了時に動画の再生し終了後にフェードアウトさせる
window.addEventListener("load", function () {
loadMovie.play();
loadMovie.addEventListener("ended", function () {
let startTime = new Date() - 0;
let time = 500;
setInterval(function () {
let elapsedTime = new Date() - startTime;
if (elapsedTime > time) {
clearInterval();
elapsedTime = time;
loadMovie.remove();
}
loadMovie.style.opacity = 1 - elapsedTime / time;
}, 10);
});
});
ここからが本題のJavaScriptです。
はじめにvideoタグに指定したidを取得しておきます。
windowのloadイベントでplay()メソッドで動画を再生し、endedイベントで動画終了時の処理を実行します。
let startTime = new Date() - 0;で現在の時間（処理の開始時間）を取得、let time = 500;で処理にかかる時間を設定しておきましょう。
setInterval(function () {}, 10);では中の処理を10ms毎に実行します。
elapsedTimeで処理の開始時間からその時の時間までの経過時間を記録しておき、その経過時間が500msを超えるまでvideoタグのopacityを0に近づけます。
elapsedTimeが500msを超えると、clearInterval()メソッドでsetIntervalの繰り返しを停止し、elapsedTimeにtimeの値の500msを入れた後、videoタグを削除します。
setInterval内の処理で、fadeoutを実現している感じです。
ページ表示時に全画面で動画を再生し、終了後フェードアウトさせるまとめ
以上が、ページ表示時に全画面で動画を再生し、終了後フェードアウトさせる方法です。
参考までにCodePenへのリンクも乗せておきます。
Coment