【HTML5】各デバイス・ブラウザごとの動画再生環境調査

これまでPC用ページではFlashプレイヤーで動画を再生するのが一般的だった。

iPadなどのタブレット端末でPC用ページを表示させたい場合、
多くのタブレット端末(iOS/Android)にFlashプレイヤーがインストールされていない為、
こういったFlashに対応していない端末では動画を再生させる事ができない

Flashに対応していない端末で動画を再生させるには、
HTML5の"<video>タグ"を利用しブラウザのプレイヤーを利用するか、
独自にプレイヤーを開発するかということになる。

独自にプレイヤーを開発する事は難しいので、今回はHTML5の"<video>タグ"について調査してみた。

まずは各端末・ブラウザごとに異なる動画形式のものをすべて実機で検証してみる。

HTML5"<video>タグ"各端末・ブラウザ別対応動画形式一覧

video001

この検証結果により、"<video>タグ"を使用する場合は、MP4WebMの2点を用意すれば、ほぼすべてのブラウザに対応できることがわかった。

・MP4形式動画
(映像コーデック:H.264、音声コーデック:AAC)メタデータ無し
・WebM形式動画
(映像コーデック:VP8、音声コーデック:Vorbis)メタデータ無し

MP4とWebM形式の動画ファイルを用意すればIE8以下を除く全端末・全ブラウザに対応する事ができる。

"<video>タグ"を利用する際のIE6~8対策

IE6~8ではブラウザにプレイヤーが搭載されていない為、
"<video>タグ"を利用しても動画を再生することはできない。

なので、IE6~8の"<video>タグ"をFlashプレイヤーで再生してくれるオープンソース"html5media"を使用する。

使用方法

HTMLファイルにJavaScriptの記述を追加する。

<script type="text/javascript" src="http://api.html5media.info/1.1.5/html5media.min.js"></script>

IE6~8で"<video>タグ"を利用した際はFlashプレイヤーで再生される。

.htaccessの記述

サーバの設定によっては、ファイルの拡張子をMIME-typeにマップしなければ動画が再生できない場合がある。
その際は.htaccessに下記の通りAddTypeディレクティブを記述して対応する。

AddType video/ogg .ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4

各種プラットフォームに対応した基本フォーマット

<video preload="none" poster="xxx.jpg" controls width="xxx" height="xxx">
	<source src="xxx.mp4">
	<source src=" xxx.webm">
	<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

"<video>タグ"記述の際の注意事項

1.スマートフォンでは動画が自動で読み込まれる設定にしているとページのスクロールがカクつくなどし、ストレスが溜まる原因となる。
デフォルトでは"<video>タグ"のpreload属性が「auto」(自動読み込み有り)になっているので、「none」(自動読み込み無し)を設定すれば、ページの読み込みの際に動画を自動で読み込まなくて済む。

<video src="動画ファイル名" preload="none"></video>

2.動画再生前はiPhoneでは動画の頭の画が自動でサムネイルとして表示されるが、現行Androidでは自動でサムネイルを生成する機能がない為、真っ黒な状態となり標準のビデオアイコンが表示される。
そのためサムネイル用のJPEG画像を用意し、poster属性に設定する必要がある。

<video src="動画ファイル名" poster="サムネイル画像名"></video>

3.通常、スマートフォンでは再生時に動画が自動でフルスクリーン表示となり、シークバーや一時停止ボタンなどのコントローラーが表示される。
しかし、iPadなどのタブレット端末ではフルスクリーン表示とならず、同ページ内で動画が再生される。
ユーザによってはフルスクリーンで見たい場合や、シークバーで再生のコントロールがしたい場合があると思われるため、controls属性を設定しておくことが好ましい。

<video src="動画ファイル名" controls width="xxx" height="xxx" ></video>

4.万が一、"<video>タグ"未対応端末にて動画が表示されなかったときのため、未対応の旨をメッセージとして記述しておく。

5.iPhoneではサムネイル画像の左右に黒みが表示される。

"<video>タグ"のwidth・heightに値を指定することにより消すことができる。

6.MP4とWebM(もしくはMP4とOGV)の2種類の動画を用意した場合、コードを記述する順番は①MP4 ②WebM(OGV)とする。

Webブラウザごとに動画再生する優先順位がある為、上記の順番でなければ動画が再生されないことがある。