背景でフルスクリーン動画を再生した後に要素を表示する(スマホ未対応)

背景全体で動画を再生する

ここ数年、ヒーローヘッダー(フルスクリーンの画像にテキストやナビゲーションを入れて画面上部に配置するデザイン)を採用するWebサイトが増えてきていますが、ヒーローヘッダ―の背景にフルスクリーン動画を使うサイトも多くなっています。

今回はフルスクリーン動画をWebページの背景で再生し、再生が終わったタイミングでテキストを表示するサンプルを作ってみました。

デモページ(PCのみ・レスポンシブ非対応)

HTML

HTMLのポイントは特にないです。今回はHTML5のvideoタグを使い、mp4形式の動画を再生しています。ただしvideoタグを使用する際の注意点がいくつかあります。

  • mp4形式の動画はほとんどのモダンブラウザでは再生できますが、スマホのブラウザや古いブラウザ(特にIE)では再生できないことがあります。(MP4対応状況はこちら
  • 今回のサンプルでは自動再生を使わないのですが、スマホではvideoタグのautoplay属性を使った自動再生ができない場合があります。
  • スマホは縦横があるので、横長の動画を縦向きのスマホでフルスクリーンにするとひどいことに・・・
  • mp4形式は容量が大きいのでスマホでまともに再生できるか不安・・・
  • 動画がうまく再生されない場合は.htaccessファイルに「AddType video/mp4 .mp4」などと書き、サーバ側の設定を変える必要があります(レンタルサーバによっては変更できない場合もあります)。

基本的にスマホサイトで背景でフルスクリーン動画を再生することは辞めた方がいいと思います。そういったjQueryプラグインやテンプレートがあるかもしれませんが、PCとスマホで別の見せ方をするのが普通だと思っていた方がいいです。

CSS

CSSのポイントは、video要素を「position:fixed;」などを使って背景全体を覆うように定義しているところです。これにより、動画の大きさが画面全体に固定されます。

ただし、この定義では動画再生中はともかく、動画再生が終わっても動画の最後のコマの画像が背景全体に固定されたままになります。スクロールのあるコンテンツを表示させると、コンテンツだけがスクロールされるようになります。それが嫌な場合は、下記で説明するjavascript部分でCSS定義などを動的に変えていくしかないと思います。

javascript

今回はjQueryを使っていません。ポイントは、video要素をgetElementById関数で取得することで、javascriptオブジェクトとして操作できる点です。play()関数は動画の再生を行うことができます。

また、上記のjavascriptオブジェクトは、video要素に関するイベントに対して処理を追加することができます。「v.addEventListener(“ended”, function(){イベント処理}, false);」の部分です。

“ended”は、動画が最後まで再生されて停止した時のイベントです。他にもたくさんのイベントがあります。

今回のサンプルでは、動画が最後まで再生された場合、javascriptのsetAttribute関数を使って動画再生後に表示させたい要素にアニメーションさせるCSSクラスを追加しています。これを応用すれば動画再生後にサイトロゴやナビゲーション、テキストなどが次々アニメーションで現れるサイトなども作れます。jQueryのanimate関数を使えばさらに簡単に作れるでしょう。

今回は以上です。

広告
  • LINEで送る