「おーでぃお」と「びでお」 - 蒼い海に溺れて2nd season

HTML5について調べたことがなかったため、後学の為にいろいろ調べてみた。いろいろ勉強になったのでノート的な意味も込めて書いてみる。

audio要素やvideo要素を使ってコンテンツを再生することそのものは簡単で便利なんだけど、再生するファイルを変換するためのエンコーダとか、未対応環境へのサポートとかまで見ていくと結構ややこしくなるね。

どうするのが一番いいのかは知らないけど、自分はこんな感じでコード書いてみた。

<video width="320" height="240" controls="controls">
   <source src="file.ogv" type="video/ogg">
   <source src="file.mp4" type="video/mp4">
   <div id="player"><script type="text/javascript">altPlayer("file.avi","320","240");</script>
   <noscript><a href="file.mp4">メディアファイルのダウンロード</a></noscript>
   </div>
</audio>

video要素対応ならそのまま再生させて、未対応環境はスクリプトで処理してメディアプレイヤーのプラグインを呼び出すコード出力（Flashなどを使った代替プレイヤーは作らないこと前提）。スクリプトでWin/Mac判定して、WinはWMPで、MacはQTで再生させる。個人的な好みもあるが、Win+QTが重いから回避したいという意図がある。

機能概要

対応コーデック

変換に使ったソフト

Any Audio Converter（mp3とかoggとかの音声）
Any Video Converter Free（mp4の動画）
ffmpeg2theora （ogvの動画）

使ったソフトと言うか変換後のファイルをブラウザが再生出来たソフトと言ったほうが良いのか？Theora/Ogg形式の動画出力に対応したソフトが少なくて難儀します。

HTML5の対応判定

if(!document.createElement('video').canPlayType) {
	// 未対応環境の処理
}

video要素対応環境でページを開いた場合はプラグイン呼び出しのコードを出力しないようにしてみようと考え、判別方法について抑えてみた。video要素が優先された場合、object要素でプラグインを読んでいるのかどうか知らんけど念のため。

プラグイン使用時のプレイヤー大きさ

Windows Media Player（標準高さ45px）
QuickTime Player（高さ16px）

video要素はコントロールを動画の上にかぶせてるけど、プラグインは動画の下にコントロールを追加している。だから、動画の場合は高さを計算したほうが良いんじゃないかなと思う。メディアファイルの高さにプレイヤー領域の高さを足して計算すれば、上下や左右に余白が出なくてスマートだと思う。

画面例

video要素が使える場合はvideo要素で、使えない場合はWMPで表示した画面。WMPは時間表示をするためにステータスバーを表示してみた。video要素使用時の状態になるべく近づけたい。
※ステータスバーを表示した場合、コントロール領域の高さは69px