動画の再生終了後に動画を非表示にしてコンテンツを表示する

昨今では多くのWebサイトで動画が使われており、Webページにアクセスした時にファーストビューで動画が流れるサイトもよく見かけるかと思います。

Webページにアクセスした時にはじめに動画が流れて、動画再生の終了時に動画がフェードアウトし、その後メインコンテンツがフェードインで表示するようなアニメーションが実装されていることでしょう。

このようなアニメーションはJavaScriptのプログラミングで実装されていることが多いですが、JavaScriptのライブラリであるjQueryを利用することで、とてもシンプルに実装することができます。

うまく動画を活用することで、発信する情報を効果的に印象付けることができます。
Web広告としても活用できるランディングページで利用していくと面白いでしょう。

ここでは、動画の再生終了後に動画を非表示にしてコンテンツを表示する方法についてご紹介します。

動画再生後の表示の切り替え

それでは、動画再生後からメインコンテンツの表示の切り替えについて、サンプルコードを交えて実装方法をご紹介していきます。

まずはHTMLで構造を作ります。

HTML

<div id="opv-wrap">
  <video id="opv" autoplay muted>
    <source src="video/opening01.mp4" type="video/mp4">
    <source src="video/opening01.webm" type="video/webm">
  </video>
</div>

<main>

  <section id="mv" class="section-conts">
    <h1>WELCOME!</h1>
  </section>

  <section id="intro" class="section-conts">
    <h2>Heading 2</h2>
  </section>

</main>

CSSもそうですがJSで要素を操作しやすいように、video要素を含む動画のブロックにid「opv-wrap」を、またvideo要素にはCSSクラス「opv」を付与しておきます。

読み込む動画は多くのデバイスに対応しているMP4やWebM形式の動画を読み込みます。
video要素は自動再生しますのでautoplay属性を設定し、一緒にmuted属性で音声をミュートにします。
（動画を自動再生する際は、音声はミュートが必須となります）

main要素は、適当にコンテンツを用意しました。

続いてはCSS。
video要素を含む動画のブロック（id「opv-wrap」）とmain要素のコンテンツは、最初は非表示としておきます。

CSS

#opv-wrap {
  display: none;
}

video#opv {
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  vertical-align: bottom;
}

main {
  display: none;
}

#mv {
  height: 100vh;
  background-color: rgb(216, 251, 254);
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-conts {
  padding: 4%;
  height: 100vh;
}

.section-conts h2 {
  text-align: center;
}

video要素は、表示領域全体に表示するスタイルを適応しています。
ほか、簡単なレイアウト調整のスタイルとなります。

そして、動画再生後のフェードアウトからのコンテンツのフェードインを、jQueryでシンプルに実装していきます。
以下、サンプルコードになります。

JS（jQuery）

$(function(){

  const opVideo = $('#opv').get(0);
  $('#opv-wrap').fadeIn(1000);

  opVideo.addEventListener('loadedmetadata', function() {
    const playTime = opVideo.duration * 1000 - 1000;

    // 確認用
    console.log('動画の時間（長さ）： ' + opVideo.duration);
    console.log('動画の表示時間： ' + playTime);

    setTimeout(function(){
      $('#opv-wrap').fadeOut(1000, function(){
        $('main').fadeIn(1000);
      });
    }, playTime);

  });

});

変数「opVideo」に、getメソッドで取得した要素のデータを格納します。
動画の要素はCSSで非表示にしていますので、fadeInメソッドでフェードインさせます。
サンプルでは、フェードインやフェードアウトの時間を1000ミリ秒（1秒）とします。

addEventListenerでは、メタデータが読み込まれたとき（loadedmetadata）のイベント処理として、動画の時間（長さ）を取得できるdurationプロパティを使い、変数「playTime」で動画の長さをミリ秒計算させてから1秒（1000ミリ秒）引いた数値を求めて格納します。1秒引いたのは、フェードアウトの処理を動画の終了1秒前から実装するように設定するため。
console.logのプログラムは、コンソールでの確認用として書いています。
変数「playTime」は、この後のsetTimeoutの時間設定に利用します。

最後に、フェードアウトやフェードインを実装するタイミングを調整するため、setTimeoutメソッドを使って、一定時間後に実行するプログラムを用意します。
その中のプログラムで動画のフェードアウト、コンテンツのフェードインを実装していきます。
先ほどの変数「playTime」をsetTimeoutメソッドのオプションに設定し、動画の終了1秒前に処理を実行するようのします。
setTimeoutメソッドの処理では、fadeOutメソッドの引数にて、カンマで区切りコールバック関数の呼び出し、フェードアウト後にmain要素のコンテンツをフェードインで表示させます。

動画再生の開始時間を調整する

動画の素材も考えて作られているのであればそのまま使えますが、動画の再生位置（開始時間）を調整することで、少し長い動画から一部分だけを使うということもできます。

以下、jQueryのサンプルコードで見ていきます。
HTMLとCSSは、先程と同じ構造、スタイルでOKです。

JS（jQuery）

$(function(){

  const opVideo = $('#opv').get(0);
  $('#opv-wrap').fadeIn(1000);

  // 確認用
  console.log('default:', opVideo.currentTime);

  opVideo.currentTime = 3;
  let playTime = 10; 
  playTime = (playTime - opVideo.currentTime) * 1000 - 1000;

  // 確認用
  opVideo.addEventListener('timeupdate', function() {
    console.log('time:', opVideo.currentTime);
  });

  setTimeout(function(){
    $('#opv-wrap').fadeOut(1000, function(){
      $('main').fadeIn(1000);
    });
  }, playTime);

});

動画の要素の取得とフェードイン表示は先程と同じになります。
video要素に対してcurrentTimeプロパティで、現在の再生位置（開始時間）を取得できます。
もちろん最初は「0」になります。
どのような値が取得できているか、コンソールで確認してみるのもいいでしょう。
確認用のプログラムは無くてもOKです。

「opVideo.currentTime = 3;」のように、要素のcurrentTimeに値を代入して現在の再生位置を変更します。
サンプルでは3秒の位置とします。
動画を10秒間流すという場合として、変数「playTime」に「10」を格納しておき、そのあとcurrentTimeを含めて、再生開始位置から10秒の動画の終了1秒前の数値をミリ秒として計算します。
addEventListenerのtimeupdateの処理は、コンソールでの確認用です。
無くてもOKです。

あとは先程と同じく、setTimeoutでフェードアウト、フェードインの処理を実装します。

以下、これまでの実装の動きになります。
（動画：3分40秒）

余談

フェードアウト処理の後のコールバック関数ですが、queueメソッドを使ったキューに登録するイベントとしても手軽にコールバックを実装することができます。

queueメソッドを使った例

setTimeout(function(){
  $('#opv-wrap').fadeOut(1000).queue(function(){
    $('main').fadeIn(1000);
  });
}, playTime);

連続するコールバックの処理が必要な場合は、queueメソッドは非常に便利です。
以下の記事にて、簡単な使い方をご紹介しています。

↓　↓　↓

jQueryで複数のアニメーションを順番に実行する方法

コンテンツの表示させるまでにいろんなアニメーションを実装させるようでしたら、queueメソッドでシンプルにコールバックを書いていくことができるでしょう。

まとめ

JavaScriptのライブラリのjQueryを利用することで、今回ご紹介した動画の再生からのフェードの表示切り替えといったことも、少ないコードで実装することができます。
JavaScriptで少し手間取るようでしたら、jQueryを使ってその他のいろんなアニメーションを実装してみてください。

また、jQueryを使わず純粋なJavaScriptでも、意外と少ないコードで実装することができます。
JavaScriptでのフェード効果のコンテンツ切り替えについては、以下の記事でご紹介しています。

↓　↓　↓

JavaScriptで動画とコンテンツをfadein/fadeoutで切り替える