Loading...
Blog Featured Image

背景動画をWEBサイト中で実装する際の基本

Pocket

どうも田中です。現在サービスのティザーサイトを複数作っており、ヘッダー背景に動画を使用しています。Webにおける動画実装方法について網羅的に調べる機会がなかったので、改めてまとめてみました。

動画実装の際の選択肢

外部サービスにホストされた動画をiframeで埋め込む

クロスブラウザ対応が面倒な場合、iframe一つで全て解決と言うシンプルさが魅力的。モバイルの際の自動再生などにも使える。iframeで適切に呼び出せないブラウザ(アプリ内ブラウザなど)もあるのでその場合は困る。jQueryプラグインがあるので合わせて利用すると便利らしい。

参考:YouTube動画をヘッダーの背景に設定する方法

Videoタグを用いて各種フォーマットの動画を埋め込む

基本的にこの方法がベター。IEの場合はIE9以降から対応している。利用できないブラウザはOpera miniだけ。
videoタグを用いて、sorceタグでフォーマットをブラウザ毎に切り替えるのが一般的。

gifを用いて埋め込む(スマホ・無声の場合)

スマートフォンで動画をイランライン再生できないブラウザバージョンがあるため、それ用に。
参考:スマホでの動画インライン自動再生まわりについて調べたことまとめ

もしくはとにかく軽量化を図りたく、フレーム数も少なくて済むような場合。

参考:電通クリエイティブ

Video(一部Audioも)タグの基礎知識


参考:HTML5リファレンス
参考:HTML5 の audio 要素と video 要素の使用

Videoタグの対応状況

基本的にはIE9以降、Opera以外は全て対応している。IE8はサポート外なので問題ない。
IE8に対応する場合はoobjectタグでFlashを読み込むなどの方法がある(未確認)。

メディアフォーマット

webm,.mp4の2つが主流(ogvもたまに)らしい。

“すべての主要なブラウザーの最新バージョンで動作するように HTML5 を使用してビデオを表示するには、ビデオを WebM 形式と MPEG H.264 AAC 形式の両方で提供して、以下のように要素を使用します”

WebM

“WebMはデスクトップ版およびモバイル版の Gecko (Firefox)、Chrome、Opera でネイティブにサポートされており、また Internet Explorer や Safari (iOS を除く) ではアドオンを追加することでこの形式をサポートできます。Edge ブラウザー向けに、VP9 WebM のネイティブサポートが 進行中 です。”

MP4

“MP4 コンテナーフォーマットは、デスクトップ版およびモバイル版の Internet Explorer、Safari、Chrome でネイティブサポートされていますが、Chromium や Opera はサポートしていません。IE および Chrome は MP4 コンテナーで MP3 オーディオコーデックもサポートしていますが、Safari はサポートしていません。Firefox/Android 版 Firefox/Firefox OS はこの形式をサポートしますが、サードパーティーのデコーダーが使用でき、かつデバイスのハードウェアが MP4 のエンコード時に使用されたプロファイルを扱える場合に限ります。”

参考:HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット

Sourceタグで複数フォーマットに対応

複数のメディアフォーマットを用意して全てのブラウザに対応する場合はsourceタグを利用する。sourceタグは videoタグの内部で利用する。type属性では、メディアファイルのMIMEタイプやコーデックを指定することができる。

preload属性

preload属性をonに指定する事で、html読み込み終了時に動画読み込みを開始し再生ボタンで即再生できる。デフォルトではautoとなっており、preloadされている。動画閲覧が必須ではない場合はnoneにしてあげると良い。

control属性

再生、停止と言ったコントローラーを表示できる。デザインはブラウザによって異なる。

現在使用中のブラウザの場合



Chromeの場合

Safariの場合

autoplay属性

ウェブページを読み込んだ時点で、動画が自動再生される。ヘッダー画像の背景として動画を用いる際は基本的に指定する。
一部のスマートフォンのブラウザバージョンによっては自動再生されない。iOS10以上では、自動再生については音声なしのときの場合のみ使える。AndoroidでChrome53以上の場合、mutedをtrueとしておけば自動再生可能。

poster属性

動画が表示されない場合に表示する画像。動画のフレームの一部を利用する。

Videoタグの留意点

Javascriptで操作する

スマートフォン時の対応

・音声ファイルありのvideoタグは自動再生されない。
・Andoroidの一部端末でフルスクリーンで再生されない。
・iOS9以下の場合はgifか、Youtubeのiframe APIか、Cnavasで行う。
(※Canvasを用いる場合は、大量の画像を用意してパラパラ漫画の要領でcanvasに描き出す方式を取る。)

Ex.iOS10の場合

参考:スマートフォンでvideoタグの動画をフルスクリーンにして再生する
参考:はたして iPhone は iOS 10 なら動画を自動再生できるのか

Audioタグを用いる場合

audioタグとvideoタグを分ける必要はそんなにない。iframeとaudioタグを分けるケースはある。ミーシーではないが以下のパターンがある。

・音声付き動画をiFrame(Youtube)で埋め込み、プラグインで音声をコントロールする。
・音声なし動画をiFrame(Youtube)で埋め込み、audioをjsでコントロールする。
・音声付き動画をvideoタグで読み込む(必要があればjsでmuteをコントロールする)。
・再生開始のタイミングが合うのであれば、video(無声)とaudioタグ両方で読み込む。

Ex.上野プラネットの場合

iframe(vimeo・無声)を読み込み、audioタグで読み込んだ音声ファイルをスイッチでON/OFFできる。
モバイルでは動画も音声も無し。

Ex.清水寺の場合

PC版はvideoタグ(音声あり)を用いている。モバイル時は動画部分そのものがない。Audioタグは用いていない。

※音声ファイルについては省略するので以下を眺めてください
参考:HTML5のAudio要素簡易利用ガイド
参考:Audioタグで効果音を鳴らすシンプルな方法
参考:audioタグでmp3再生をfirefox等で対応させる

軽量化について

動画は基本的に5MB以下に抑えた方が良い。動画の再生形式を変換できるフリーソフトHandBrakeを用いて動画圧縮を行うと良い。

参考:Webサイトで動画再生させる場合に必須!動画の軽量化方法

Pocket

About Spornia.

スポーツ・ナレッジ・テクノロジーを編集して、
 子どもたちの持つ未来の可能性を拡げることで、
 世界をもっと楽しむ人を増やしていく。

Email:info@sports-pioneer.co.jp

Our Services
  • 研究開発
  • インフラ開発
  • コンテンツ開発