FreeStyleVision

こんにちはCooneyです。

みなさんご存知でしょうがHTML5にはvideoタグというのが新設されています。
～～・・・・

<span style="color: #800080;">&lt;p&gt;&lt;video src="***.vid" autoplay controls onerror="failed(event)"&gt;&lt;/video&gt;&lt;/p&gt;</span>

～～・・・・
といった構文でファイルの再生が可能になります。（※1）
この場合flashなどのプラグインなしで動画を再生するわけですが、
このHTML5 videoの主な再生コーディックとしてH.264（MPEG-4）とWebMの2つのコーディックが並んでいます。
H.264は現行最大勢力でありWebMは高画質かつロイヤリティフリーが特徴となっています。（※2）
今のところH.264 VS WebMという図式で語られていることが多いようです。

そんな中で2011/1/12にGoogleがChromeでのH.264サポートを終了するという記事が掲載されました。
http://headlines.yahoo.co.jp/hl?a=20110112-00000017-zdn_ep-inet

反響が大きかったせいかその後Googleが追加説明を行いました。
http://internet.watch.impress.co.jp/docs/news/20110117_420868.html

記事を読んでお判りの通り、現状ではエンドユーザーに特に影響はありません。

今まで私にとってあまり興味が無かった動画分野ですがiPadの人気もあり、現在のHTML5 video状況を
押さえておく必要があると感じましたので遅蒔きながら今回はHTML5 videoの状況について調べてみました。
（なお、HTML5に関してこちらのサイトで概要が掴めます。http://www.html5-guide.com/）

まずメジャーブラウザのHTML5 video対応状況を渦中(？)のH.264とWebMの2つのコーディックで調べてみました。

（対応：○ 非対応：× ） 2011/01/23 時点

参考にしたサイト：http://journal.mycom.co.jp/articles/2010/06/02/html5-videos/index.html

各ブラウザの旧バージョンも考慮に入れるとプラグインに頼ったほうが楽そうです。
flashは今後のWebM対応を表明していますし。

しかしながらiOS版Safariのflash非サポート、HTML5採用とiPad人気を考えるとクロスブラウザ対策を施し、
HTML5 video/プラグインの処理を分岐する必要がありそうです。
こんな組み合わせでしょうか。↓

（V：HTML5 video　P：プラグイン　V/P：いずれか） 2011/01/23 時点

これはちょっと大変そうです。

そこで少しでも参考になるようなサイトが無いか調べてみたところYouTubeにデモサイトがありましたので
テストしてみました。

http://www.youtube.com/html5?hl=ja

閲覧手順は上記サイトある通りですが、一応手順を書いておきます。
ブラウザ：Chrome/Firefox3.6/IE8
（Chrome：対応ブラウザ Firefox3.6/IE8：非対応ブラウザ）
コーディック：WebM（H.264がどうしてもヒットしなかったため。）

1.ブラウザで上記サイトを開く。
2.上記サイトでHTML5 試用版を有効にするをクリック。
3.このまま検索するとHTML5がなかなか表示できないのでYouTube検索で &webm=1 と入力して検索。
4.検索結果を再生します。
5.右下に「HTML5」あるいは「HTML5 WEBM」と表示されていればHTML5で再生されています。
（再生画面を右クリックするとHTML5と表示されます。）
サンプル：http://www.youtube.com/watch?v=ZXYVyrrUZ3c&feature=related%20&webm=1

Chromeで再生するとHTML5で再生されFirefox3.6/IE8で表示するとFlashで再生されました。
またソースを比較したところ（判別ロジックは分かりませんでしたが）Chromeではvideoタグが存在し、
Firefox/IEではvideoタグが存在せずflashが指定されていました。

Chromeでのvideoタグ

<span style="color: #800080;">&lt;div class="video-content"&gt;
&lt;div class="html5-video-loader html5-center-overlay html5-icon" style="-webkit-transform: rotate(200deg); "&gt;&lt;/div&gt;
&lt;video class="video-stream" src="http://**********"&gt;&lt;/video&gt;
&lt;/div&gt;</span>

やはり処理分岐を行っているようです。
当面こういった仕組みを実装するしかなさそうです。

以上、HTML5 videoの状況についての簡単な紹介でした。
紹介しきれなかった部分もあり状況は常に流動的ですのでまた継続してレポートしたいと思います。

※1  ソースの詳細はこちら。http://www.w3.org/TR/html5/video.html#video（英語）
※2  H.264に関してはこちら。http://ja.wikipedia.org/wiki/H.264
WebMに関してはこちら。http://www.atmarkit.co.jp/news/201005/20/vp8.html

タグ: Flash, HTML5, WebM

トラックバックURL: