- 2010-05-28 (金)
- HTML5
ようやく HTML5 手がけてみることに
まぁ、なんか Flasher にとっては少し活躍の場を奪われそうな HTML5 の様々な機能だが、便利なものは便利。
別に Flash vs HTML5 ってわけではなく、それぞれのメリットを活かしていきたいなーと思って、とりあえず HTML5 の video タグを試してみた。
HTML5 の video タグについて
とりあえず、HTML5 の video ってどうすりゃいいの？ってことで、簡単に情報を集めている。
- HTML5 の video タグについての情報
- Firefox 3.1のHTML 5対応--video/audio要素のサポート - page2 - builder by ZDNet Japan
- videoタグで動画を埋め込む－そろそろ、HTML5
- [Think IT] 第2回：HTML 5の機能を試す！ (2/3)
- HTML 5 の video | ヨモツネット
まぁ、端的に言えば、img タグと同じようなもんか。もちろん、あれやこれやとする場合は、css や javascript 等も絡んでくるのだろうけども、基本は本当に単純なものみたい。
早速 HTML5 の video タグを試してみる
とりあえず、動画ファイルについては、過去に作った遺物をサンプルとして晒してみる。
とりあえず、Safari4 と Google Chrome で動画が見れるようだ。FireFox3.6 は何故かダメ…汗
⇒上記現象は無事に解決。ページ下部に情報を記載済み
↓HTMLソースはこんな感じ
<video controls autoplay poster="/uploadfile/100528/img.gif" width="320" height="240">
<source src="/uploadfile/100528/the_time_when_it_snows.ogv" type="video/ogg">
<source src="/uploadfile/100528/the_time_when_it_snows.mp4" type="video/mp4">
<source src="/uploadfile/100528/the_time_when_it_snows.webm" type="video/webm">
<p>動画を再生するには video タグをサポートしたブラウザが必要です。</p>
</video>
ポイントとして、動画ファイルのソースを複数記述している。
HTML5 の video タグ自体は非常に簡単なんだけども、この再生される動画のフォーマットが、現状、ブラウザによってバラバラになっている状況らしい。
- HTML5 のビデオコーデック対応状況について
- HTML5 video、ブラウザ対応状況とコーデックまとめ | エンタープライズ | マイコミジャーナル
なので、ソースで複数の動画フォーマットのファイルを用意しておくことで、対応されている動画が再生されるようになるらしい。
それにしても、複数の動画フォーマットを用意するのは結構面倒だよね…（汗）
あとは、最新の情報としてこんな情報もあるようだ。
- HTML5 のビデオコーデックの今後？
- グーグルがVP8をOSS化、HTML5のvideo問題が決着か（＠IT） - Yahoo!ニュース
なんで、ついでに「.webm」の動画フォーマットもソースに記述してみた。
ただ、ビデオコーデック対応については、もうしばらく様子見って感じかな。これも結局ちゃんと統一されないと、またとんでも無く面倒な状況になりそうで怖いねー ∑（゜Д゜；）
動画フォーマットの変換
ちなみに動画フォーマットの変換は下記のソフトで行った。
- 「Miro Video Converter」の紹介
- MOONGIFT: iPhone/Android向けに動画を変換する「Miro Video Converter」:オープンソースを毎日紹介
- 「Miro Video Converter」のダウンロード
- Miro Video Converter FREE - Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more.
ただ、今回は何故か Theora（.ogv） で書き出した動画フォーマットが Firefox3.6 で再生されなかった…。
なんでだろう…。他のソフトなどで変換するとちゃんと再生されるのだろうか…？うーん。良く分からないなー。
＜追記＞
FireFox3.6 で動画が再生されない件だが、下記サイトの情報で無事解決！
.htaccess に下記を記述すると、無事に FireFox3.6 でも再生されるようになった！
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
この記事をブックマークしておく
コメント:0
トラックバック:0
- この記事のトラックバックURL
- http://god.xsrv.jp/__mt/mt-tb.cgi/1718
- トラックバックを受ける記事
- ちょっと衝動的に HTML5 の video タグを試してみた from 1ka2ka.com Flash & Action Script
