イナヅマTVログ

HTML5 Video Player #fsync 2011-07-28

| 0件のコメント

future sync vol.1 でのLT資料を公開します。
http://futuresync.jp/

開催日直前に参加が決まったので超突貫工事ですけど…

HTML5 Video Playerの選択肢について話しました。

videoタグを使えば動画再生は従来のFlash+flvよりも手軽に行えます。
しかもiOS, Android, Windows Phoneにも対応できると良いことずくめです。

h.264(.mp4)とWebM(.webm)の2ファイルを用意するとIE6~IE8以外は全て対応できます。
h.264だけの場合はFlash Playerを用意する必要があります。

IE6~IE8にも対応させるならFlash Playerは必須になります。

videoタグでobjectタグを挟むようにします。
詳細はスライドにも書いた Video for Everybody! をご覧下さい。

<video>
   <object>
       <param />
   </object>
</video>

時間が無くてゆっくり見てもらえなかったデモファイルも公開します。
*IE6~IE8には対応していません。
*急遽作成したのでvideoタグに対応したブラウザでしか動作しません。
.mp4だけを用意しています。
Leanback Playerは0.7.2を使用していますがFirefoxでバグがあるらしく動作しません。 Ver.0.8でFixするらしいのですが現在はまだベータテスト中のようです。
む〜、ローカルテストではWebMを用意すれば動いたんだけどなぁ。
現在調査中・・・

demo

HTML5 <video>タグだけでビデオ(動画)再生は可能?

h.264(.mp4)とWebM(.webm)の2種類のファイルを用意するのが無難です。
h.264だけの時とIE6~IE8をサポートする場合はFlash Fallbackが必要になります。

Flash Fallbackは各ライブラリが提供するPlayerのライセンスに注意して使用して下さい。

【注意】
.mp4は大丈夫だと思いますが、.webmと.ogvはサーバーが対応してないことが多いようです。
.htaccessに下記のようにAddTyeを記述して下さい。

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

【最後に】
future syncに参加していたどのコミュニティとも無縁でしたが話をする機会をいただき感謝しています。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください