読者です 読者をやめる 読者になる 読者になる

HTML5 Video のサポート状況

2013年9月現在、video 要素を使うとブラウザで簡単に動画が再生できる。

<video autoplay loop>
	<source src="suzume-kawaii.mp4" type="video/mp4">
	<source src="suzume-kawaii.webm" type="video/webm">
	<source src="suzume-kawaii.ogv" type="video/ogg">
</video>

ファイル形式の対応状況

形式は MP4 (H.264 + AAC) をサポートするブラウザが多く、続いてオープンな規格として開発が進められている WebM (VP8 + Vorbis) が続く。現状は MP4 と WebM を用意しておけばほとんど問題ないだろう。

ブラウザ MP4 WebM Ogg
Safari 6 × ×
Explorer 10 × ×
Opera 16 ×
Firefox 24 ×
Chrome 29

画質でも MP4 と WebM が有利

非圧縮の動画ファイルが無く MP4 を元にしたものでしか検証できなかった。FFmpeg でファイルサイズが同じくらいになるようパラメータを調整して出力すると次のようになった。

再圧縮をしていない MP4 の画質がいいのは当然として、面白いのが WebM と Ogg で大きな差が出ていること。デコード方法の差かもしれないが、WebM のほうがコントラストが高く、くっきりしている。

また映像を拡大したときの補間が MP4 では滑らかになっている。

ちなみに FFmpeg のオプションは次のように指定した。

ffmpeg -i $(SRC).mp4 -f webm -vcodec libvpx -acodec libvorbis -vb 490k -ab 128k $(SRC).webm
ffmpeg -i $(SRC).mp4 -f ogg -vcodec libtheora -acodec libvorbis -vb 600k -ab 128k $(SRC).ogv

Internet Explorer での注意点

Internet Explorer では、動画ファイルが Web サーバから正しい mime タイプで送られる必要がある*1

MP4 なら video/mp4、WebM なら video/webm を設定しよう。