TORTERECETTE

猫分儀スミレの開発日記 跡地

HTML5 videoのcodecsの書き方

すっごい古い記事です ご注意下さい

<source src='videofile.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

いわゆるHTML5 videoのsource要素のtype属性には、上記のように動画のコーデックを書くらしい。
avc1.42E01E, mp4a.40.2 とか "avc1.58A01E, mp4a.40.2" とか色々あるらしいのだが、全く意味が分からない!動画によって変わるらしいけど、自分の動画に適した文字列はどれなんだよ!

というわけで調べました。
なぜかなかなか情報が見つからなくて大変だった。


結論から言うと、H.264形式の場合、動画のプロファイルレベルによって何を書くべきかが変わります。

まず、前半のavc1.42E01Eの部分が動画のコーデックを表しています。「avc1」がAVC、つまりH.264という意味になるそうです。

.」に続いて「42E0」という部分がプロファイルを表します。
42E0」→ ベースラインプロファイル
58A0」→ 拡張プロファイル
4D40」→ メインプロファイル
6400」→ ハイプロファイル
大抵の場合、この四種類のうちのどれかでしょう。

次の「1E 」がレベルを表します。実はこれ、レベルの数字を10倍して16進数で書いてるだけだったり。
レベル1.3は13、それを16進数表記にすると「0D」。
レベル3.0は30、それを16進数表記にすると「1E」。
レベル3.1は31、それを16進数表記にすると「1F」。
他のレベルもこの応用です。


続いて「mp4a.40.2」の部分ですが、これは「AAC-LC(Low-Complexityプロファイル)」という意味らしいです。
世の中に存在するMPEG-4やH.264ビデオの99.9%はAAC-LCを音声に使ってると思うので、この文字列は固定だと考えていいでしょう。

ちなみに「mp4a」の部分が「AAC」、「40.2」の部分が「LC」を表しているそうです。
他の値を私は知りません。


よく使う組み合わせは以下の二通りでしょうか。
avc1.42E01E, mp4a.40.2」ベースラインプロファイル、レベル3.0。
iPhone 初代〜3GSなどに対応した、640x480以内の動画によく使われる形式です。
avc1.4D401F, mp4a.40.2」メインプロファイル、レベル3.1。
iPadやiPhone4で新しく対応した1280x720以内の動画によく使われます形式です。

この謎の文字列、元は動画に埋めこまれているバイナリ値らしいです。H.264の仕様に詳しい人にとってはここに書いてあることは常識なんでしょうか?


…と、ここまで書いておいてなんですが、現代のブラウザの多くはこの文字列をちゃんと読んでいません。明らかに未対応の形式でもとりあえず読み込もうとしますので、例えばiPhone 3GSと4用の動画を分けるような用途には意味を成しません。

もちろんsourceを複数書いておけば、sourceを読み込み→再生不可→次のsourceを読み込み→再生不可→次のsourceを読み込み…という風に、再生できる形式が見つかるまで読み込みを続けてくれるので、3GSと4の両方に対応する事自体は問題ないんですが…。なんとなく時間を無駄にしている気がしますね。

もしレベルやプロファイルなどが全く分からない場合、単純に「avc, mp4a」と書けばそれだけで「H.264とAACですよ」という意味になり、最低限これで通用します。あるいはコーデックなど全く書かずに「type='video/mp4'」とだけ記しておいても支障はないでしょう。

ただ、将来のブラウザはちゃんと対応するかもしれないので、なるべくプロファイルとレベルは正確に記述しましょう。


余談ですが、H.264以外の形式の場合。
WebM形式では、今のところコーデックの組み合わせは一種類しかありません。
video/webm; codecs="vp8, vorbis"
VP8動画にVorbis音声です。この辺はWebMの方がシンプルで分かりやすいですね。