video要素の基礎の基礎〜それが一番大事！〜

2016.10.07

video要素の基礎の基礎〜それが一番大事！〜

お疲れ様です、大塚です。

2016年1月12日にInternet Explorer 8（以下、Internet ExplorerはIEで表記）のサポートが終了して、約9ヶ月経過しました。

Web制作業界的にも、IE対応が9以上になったプロジェクトも多いのではないでしょうか？

古いブラウザを切り捨てることにより、デバッグの時間も短縮されたかと思います。

また、今まで使えなかった要素を積極的に使えるようになり、表現の幅も広がりました。

たとえば、video要素。

採用情報 / 株式会社LITALICO 様

こんな感じで、メインビジュアルの背景が動画になっている演出は、静止画だけでは伝わらない情報をユーザーに届けることができます。

じゃあ、実際にコーディングしていこう！。。。。と、いきたいところではありますが、その前に、video要素の基礎をおさらいしましょう。

何事も、基本を疎かにしてはダメなのです。

そんなわけで、今回はvideo要素の基礎的な部分をおさらいしつつ、

・2016年10月時点での各ブラウザの動画ファイルフォーマット対応状況
・見落としがちなサーバー側の設定

も合わせて確認していきます。

video要素の使い方

まずは、video要素の使い方。

要素

video要素の扱いは、img要素と似ている部分があります。

<video src="sample.mp4"></video>

video要素に対応していないブラウザ用に、テキストでメッセージを入れることができます。

<video src="sample.mp4">
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

video要素で内包したsource要素は、フォーマットの異なる動画データを複数指定することができます。

<video>
<source src="sample.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="sample.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

属性

poster属性は、ユーザー環境が動画に対応していないときに表示させる画像ファイルを指定することができます。

<video src="sample.mp4" poster="sample.jpg"></video>

controls属性を指定すると、ブラウザが自動的に動画を操作できるインターフェイスを表示してくれます。

<video src="sample.mp4" controls></video>

autoplay属性を指定すると、ページを読み込んだ時点で動画が再生されます。

<video src="sample.mp4" autoplay></video>

preload属性で、動画の読み込み方法を指定することができます。
autoplay属性が指定されている場合は、autoplay属性が優先されます。

<video src="sample.mp4" preload="auto"></video>
<!-- "auto"：ページ読み込み時に、動画を読み込みます。 -->
<video src="sample.mp4" preload="metadata"></video>
<!-- "metadata"：ページ読み込み時に、メタデータのみを読み込みます。 -->
<video src="sample.mp4" preload="none"></video>
<!-- "none"：動画が再生されるまで、動画を読み込みません。 -->

その他属性一覧

src属性：動画ファイルを指定します。
loop属性：ループ再生を指定します。
width属性：幅を指定します。
height属性：高さを指定します。

メディアフォーマット

次は、2016年9月時点での、各ブラウザで対応している動画ファイルのフォーマットをまとめました。

MPEG-4/H.264（.mp4）対応ブラウザ

・ IE 9+
・ Edge 12+
・ Firefox 35+
・ Chrome 4+
・ Safari 3.2+
・ iOS Safari 3.2+
・ Android 4.4+
・ Chrome for Android 51

WebM（.webm）対応ブラウザ

・ IE 非対応
・ Edge 14
・ Firefox 28+
・ Chrome 25+
・ Safari 非対応
・ iOS Safari 非対応
・ Android 2.3+ 部分的に対応
・ Chrome for Android 51

Ogg（.ogg）対応ブラウザ

・ IE 非対応
・ Edge 非対応
・ Firefox 3.5+
・ Chrome 4+
・ Safari 非対応
・ iOS Safari 非対応
・ Android 2.3+
・ Chrome for Android 51

主要なブラウザのほとんどが.mp4に対応していますので、video要素に記述するファイルは、.mp4のみで十分でしょう。

MIMEタイプ

「テストサーバーでは再生出来た動画が、本番サーバーでは動かない！」

サーバー側でMIMEタイプの設定をしていないと、こんなトラブルを引き起こしてしまう危険性があります。

以下、ApacheでのMIMEタイプ設定方法。

Apache

.httpd.confにて、MIMEタイプの設定が可能。

AddType video/mp4 .mp4

サーバー周りの設定はフロントエンドだけでは対応できないので、事前にサーバー管理者とMIMEタイプの設定に関して話し合っておくことが大切です。

まとめ

以上、video要素の基礎と、使用する上での注意事項を簡単にまとめてみました。

動画ファイルは容量が大きくなってしまうので、サーバーやブラウザへの負荷を軽減せるために、ある程度の大きさの動画にブラー等のフィルターをかけてキレイに魅せる工夫が必要です。（Apple Retinaディスプレイ等のHiDPIディスプレイに完全対応の動画にすると4Kとかになってしまうので。。。）

しっかりと基礎を理解した上で、動きのある格好いいWebサイトを作っていきましょう！

それでは、あなたに素敵なコーディングライフがあらんことを。

参照：
Mozilla Developer Network
Can I use… Support tables for HTML5, CSS3, etc

un-Tech

un-Tech