asamuzaK.jp

今回、シガーライター装着で、気楽な気持ちで動画を埋め込もうとしたら、ことのほかドツボったので、備忘録としてメモ。

YouTubeとかにアップしてそれをそのまま埋め込めば早いのはわかってはいるけどね… フラッシュ嫌なのw

HTML5ではvideo要素というのが策定されていて、そこに埋め込めば動画がインラインで表示できるようになっている。 しかも、control属性というのもあって、再生/停止などはブラウザお任せで表示できる。

しかしながら、まず用意すべき動画のファイル形式（エンコード形式）が定まっていない。 mp4（video/mp4）はSafariとIE9、ogg（video/ogg）やwebm（video/webm）はFirefox、Chrome、Operaと分かれている。
IE8以下はmp4をQuickTimeプラグインで再生させるとして、さらに加えて（うちのサイトは「PCだろうがスマホだろうがガラケーだろうが1つのリソース」をモットーwにしているので）、ガラケー用に、DoComoとSoftBankは3gp（video/3gpp）、auは3g2（video/3gpp2）と都合4つも動画を用意しなければならない。

ということで、これらをまとめたソースを書くと次のようになる。

<video controls="controls">
<source src="sample_video.mp4" type="video/mp4" />
<source src="sample_video.webm" type="video/webm" />
<!--以下の2つは現状では無意味だが、今後万が一HTML5を解釈するガラケーが出てきたときのための備えw-->
<source src="sample_video.3gp" type="video/3gpp" />
<source src="sample_video.3g2" type="video/3gpp2" />
<object type="video/mp4" width="320" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="sample_video.mp4" />
<param name="autoplay" value="false" />
<param name="controller" value="true" />
<param name="scale" value="aspect" />
<p><a href="sample_video.3gp">再生（DoCoMo / SoftBank）</a>（<a href="sample_video.3g2">再生（au）</a>）</p>
</object>
</video>

video要素、object要素ともに、heightは自動計算させたいのであえて入れてない。 こうしておけば、アスペクト比が4:3だろうが16:9だろうが使い回せる（ただし、動画の値を取得してから描画することになるので、動画を埋め込んだ場所（たとえばページの最初の方とか）やタイミングによっては、後続する要素が丸ごと下がっていくのを目の当たりにすることになりますw）。 また、heightを指定するとガラケーでその分の「空白」も生じてしまう。 上記のような小細工せずともCSSで指定すればOKです

4つもファイルを用意しなければならないのは無駄の一言だが、これで概ねどんなブラウザでも再生できるはず（ガラケーはダウンロード再生となる）。
しかし、万全ではなく、ガラケー（FOMA）のフルブラウザだと再生できないorz