videoタグでの再生に対応する新しい動画フォーマット「WebM」を試してみた
videoタグで使用可能な動画ファイルのフォーマットにWebMが追加されたので早速(と言うほど早くないですけどw)試してみました。
WebM関連のニュース
まずはWebMって何って人向けに解説サイトなどを
米GoogleがVP8を「WebM」としてOSS化、主要ブラウザが一斉サポート | パソコン | マイコミジャーナル
http://journal.mycom.co.jp/news/2010/05/20/049/index.html
対応ブラウザ
現在Firefox、Opera、Chromiumの開発版で動作させる事が出来る様です。
Firefox
対応版FirefoxのDL先
Firefox Nightly Builds
http://nightly.mozilla.org/webm/
FirefoxのBlog
about:mozilla » WebM, Inspector, AMO, Fennec, Socorro, Sync, Thunderbird, Jetpack, Drumbeat, and more…
http://blog.mozilla.com/about_mozilla/2010/05/25/webm-inspector-amo-fennec-socorro-sync-thunderbird-jetpack-drumbeat-and-more/#open
Opera
対応版OperaのBlog&DL先
Opera supports the WebM video format - Opera Developer Community
http://dev.opera.com/articles/view/opera-supports-webm-video/
Chromium
※ChromiumはDL先がわかり辛いので特にこだわりが無ければ先に紹介した2つのどちらかの方が良いでしょう。
対応版ChromiumのDL先
※自分のOSに対応するディレクトリの一番最新のものをDLします。
Index of /buildbot/snapshots
http://build.chromium.org/buildbot/snapshots/
Chromiumのブログ
Chromium Blog: WebM and VP8 land in Chromium
http://blog.chromium.org/2010/05/webm-and-vp8-land-in-chromium.html
サンプルページ
Operaのサンプルページ
Sunflower (WebM)
http://devfiles.myopera.com/articles/1891/sunflower-webm.html
WebMフォーマットの動画の作成(変換)方法
WebMフォーマットへの変換はFirefoxのブログでも紹介されている「Miro Video Converter」で行うのが簡単で良いでしょう。アプリを起動後、出力フォーマットを選択して変換元のファイルをドラッグするだけでOKです。
Miro Video Converter FREE - Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more.
http://www.mirovideoconverter.com/
自分で使ってみる場合
今回はhetemlのサーバに作ってみました。他のサーバでもApacheの設定にAddTypeを追加すれば同様に動作するはずです。
それでは手順を説明します。ファイル構成は同一フォルダに以下の3ファイルとなります。
.htaccess
video.webm
index.html
まずは .htaccess ファイルに以下の記述を行います。
AddType video/webm .webm
次に index.html です。videoタグの記述は今回、同じフォルダに置いた video.webm 再生するので以下の様に記述します。
<video controls="controls"> <source src="video.webm" type='video/webm; codecs="vorbis,vp8"'> <p><a href="video.webm">Download the video</a>.</p> </video>
全体は以下の様になります。
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>WebMの再生テスト</title> </head> <body> <video controls="controls"> <source src="video.webm" type='video/webm; codecs="vorbis,vp8"'> <p><a href="video.webm">Download the video</a>.</p> </video> <hr /> ここで使用した動画作成時に使用した素材の著作などは<a href="http://www.youtube.com/watch?v=Z7yh_mwAhYc">こちら</a>のページで確認下さい。 </body> </html>
こちらで実際に動作確認できます。WebMに対応しているブラウザで開いてみて下さい。
Youtube
YoutubeもWebMに一部対応済みとの事です。
※WebM形式の動画アップロードが可能。過去に投稿された動画も現在、WebMへの変換中らしいです。
実際に試す場合は対応ブラウザで以下の手順
1. http://www.youtube.com/html5 にアクセス。
2. 「HTML5ベータ版を有効にする」と書かれたリンクをクリック。
3. 適当な単語で検索し、検索ページのURLの最後に「&webm=1」を追加する。
例えば「dog」で検索する場合は以下の様になります。
http://www.youtube.com/results?search_query=dog&aq=f&webm=1
WebMを再生している時はプレイヤーの右下に「HTML5・WebM」と表示される様です。
関連情報
The WebM Project : The WebM Project : Welcome to the WebM Project
http://www.webmproject.org/
VP8対応ブラウザ、Firefox/Opera/Chromium開発版 | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/news/2010/05/24/005/index.html
何が革新を阻害するか?--標準技術の“モダンブラウザ”がウェブ発展させる:ニュース - CNET Japan
http://japan.cnet.com/news/media/story/0,2000056023,20414013,00.htm