トップ > HTML5 > ちょっと衝動的に HTML5 の video タグを試してみた

ちょっと衝動的に HTML5 の video タグを試してみた

ようやく 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 タグを試してみる

とりあえず、動画ファイルについては、過去に作った遺物をサンプルとして晒してみる。

動画を再生するには 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

この記事をブックマークしておく

コメント:2

Tsuyoshi. 2011-11-06 (日) 13:16

役立ちました!ありがとうございます!

ヒカルツカサ(管理人) 2011-11-06 (日) 18:20

わざわざコメントありがとうございます!
どーいたしましてー!!

コメント投稿

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

この情報を記憶する

トップ > HTML5 > ちょっと衝動的に HTML5 の video タグを試してみた

記事検索
カテゴリ
RSSフィード

このページの先頭へ戻る