動画コンテンツを制作するにあたってこれまでPCではFlash、スマホはMP4で設置しとけば何とかなる感がありますが、レスポンシブデザインサイトで制作する事を想定した場合、動画形式についてもブラウザ間の仕様やキャリア端末毎の問題点や把握すべき点がありそうだったので調査してみますた。
<video>タグについて
webサイトにて動画コンテンツを設置する際は、HTML5で新たに追加された<video>タグを使用する。
これにより、Flash無しで動画が再生可能となる。iPhone・iPad・iPod Touchなど、
Flashに対応していない端末で動画コンテンツを利用する際は、<video>タグだけが動画コンテンツに対応させられる唯一の方法となる。
<video>
<source src='動画ファイル' type='video/拡張子; codecs="動画データ(MINEタイプやコーデック)"'>
動画を再生するには、videoタグをサポートしたブラウザが必要です。
</video>
<video>タグで使用できる属性
poster属性
動画が再生されるまでの間に見出しとなるサムネイル画像のURLを指定
<video src="動画ファイル" poster="サムネイル画像"></video>
controls属性
再生・一時停止・再生位置の移動・ボリュームなど、 動画を利用しやすくするインターフェースを、ブラウザが自動で表示
<video src="動画ファイル" controls="controls"></video>
autoplay属性
ウェブページを読み込むと同時に、動画を自動再生させる
<video src="動画ファイル" autoplay="autoplay"></video>
preload属性
動画の容量が大きい場合、ページをロードしてから再生させるまでにタイムラグが生じる事への対処としてページのロード時に動画をあらかじめ読み込ませる指定ができる。
<!-- 自動プリロード設定 -->
<video src="動画ファイル" preload="auto"></video>
各ブラウザ・端末に対応した動画形式の検証
PC用各ブラウザの対応動画形式一覧 ('14/3月更新)
PC用の各ブラウザと主要動画形式のMP4・WebM・OGVの3種の再生可能かを実記検証した結果がこちら。
|
MP4 |
WebM |
OGV |
Chrome |
○ |
○ |
○ |
FireFox |
○ |
○ |
○ |
Opera |
○ |
○ |
○ |
Safari |
○ |
× |
× |
IE6~8 |
× |
× |
× |
IE9、10 |
○ |
× |
× |
各ブラウザの<video>タグ対応可能バージョンは以下のとおり。
- ●Safari 3.1以降
- ●Firefox 3.5以降
- ●Internet Explorer9以降
- ●Opera の最新ビルド
2014年3月現在、各ブラウザはmp4動画に対応しており、IE8以下のブラウザのユーザーを意識しない場合は、mp4形式の動画があれば、主要ブラウザに対応できるようになりました
(XPも消滅するのでもはやIE8以下の対応は必要ないかも)
スマホ・タブレットの対応動画形式一覧
上記と同様にスマートフォン(iPhone5&Android Galaxy S2)とタブレット(Nexus7 & iPad)にて各動画形式の実機動作検証の結果です。
スマートフォン |
MP4 |
WebM |
OGV |
Android標準ブラウザ |
○ |
× |
× |
iPhone用safari |
○ |
× |
× |
タブレット |
MP4 |
WebM |
OGV |
Android用Chrome |
○ |
○ |
× |
iPad用Safari |
○ |
× |
× |
上記検証の結果から各ブラウザに対応させる為には
MP4形式とWebM形式を用意しておけば、記事投稿時(2013年5月)現在の主要端末・主要ブラウザの動画コンテンツに対応できる
WebM形式の代わりにOGV形式動画を用いても良いが、OGVファイルは要領が大きくなるため、WebMファイルを優先させる方が好ましいと思います。
また、エンコードの際に
動画にメタデータを含ませると、端末によって再生できない場合や再生開始までに時間がかかる場合があるため、用意すべき動画にはメタデータを含ませない物が好ましいと思います。
<video>タグ使用の際に用意すべき動画形式
MP4形式動画
(映像コーデック:H.246、音声コーデック:AAC)[メタデータ無]
WebM形式動画
(映像コーデック:VP8、音声コーデック:Vorbis)[メタデータ無]
HTML5タグ非対応ブラウザへの対処
上記で述べたようにIE6~8をはじめとするHTML5タグへの基準が十分ではないブラウザでは<video>タグ自体が対応していないため、別個スクリプトの実装が必要となる。
html5media(https://github.com/etianen/html5media)
html5mediaのjsファイルを読み込ませる事でvideo要素やaudio要素をサポートしていないブラウザでも表示対応させる事ができる。
<!-- head内に記述 -->
<script src="../html5media.min.js"></script>
OGV形式が動作しない時のサーバーサイド対応
FireFoxでHTML5サイトの動画を再生させるには標準動画規格のogv形式(動画コーデック Theora)の指定が必要だが、サーバーによっては ogg(音声コーデック Vorbis)を追加させなければ動画を再生する事ができないため.htaccessに下記の記述をする事で対応させる。
mp4形式での再生ができない場合
またmp4形式もIE9ではローカルでは見れるがサーバーにアップすると見れなくなるという場合は、こちらも.htaccessでの指定が必要となる。
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
AddType video/mp4 .mp4
動画周りもレスポンシブデザインに対応させる場合はページ容量と処理の負担を極力減らさなければならないので、今後も調査していこうと思います。