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」と表示される様です。

強火で進め

このブログではプログラム関連の記事を中心に書いてます。