videoタグでビデオ再生

いろいろなサイトを参考にvideoタグでビデオを再生してみた。

□参考サイト
・CSS Nite LP 9.2（reprise）フォローアップ｜ヨモツネット
http://www.yomotsu.net/wp/?p=578
・<video>タグで動画を埋め込むーそろそろHTML５｜HTMLクイックリファレンス
http://www.htmq.com/html5/004.shtml

□コード

<video id="videos" controls autoplay>
      <source src='movie/test.webm' />
      <source src='movie/test.mp4' />
      <source src='movie/test.ogv' />
      <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

とりあえずローカルでプレビュー。
確認したブラウザは

• FireFox 3.6
• Safari 5.0.3
• Google Chrome 8

いずれもOSはMac OS X。

まず僕のデフォルトブラウザであるFireFox先生ですが

 

表示されない。まぁまだまだだしね。これは仕方ない。

また後日調査しよう。

次はSafari君。

なぜ表示されない！？


まぁいいや、次はGoogle先生の子、Chromeさん。

ばっちし。

んーSafari先生が表示できなかったかわかんなかった。
試しに、<source>タグの位置を入れ替えると、、、

<video id="videos" controls autoplay>
      <source src='movie/test.mp4' />
      <source src='movie/test.ogv' />
      <source src='movie/test.webm' />
      <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

safariで表示された。。。

 

どうやら読み込む順番に問題があったみたい。
先に、「〜〜.mp4」を読んでおいたほうがsafariはいいみたいね。
webmはまだ見れないからわかんないけど、コーデック問題はどうにかしてほしい。
というか、逆にいろんなコーデックをサポートしておけば問題ないと思うんだが。

個人的な感想ではmp4はファイルが重いイメージがあるんだよね。
ogvがマイナーでね、圧縮率＝品質だからこちらもどうかと思うんですけど。

でもXHTMLみたいにObjectタグでゴチャゴチャと記述しないでシンプルでいいわvideoタグ。