イナヅマTVログ

HTML5なVideo Playerライブラリ、VideoJSとMediaElement.js

| 7 Comments

WebでビデオだったらFlash+.flv最強伝説が長く続いてましたがiOSの登場で状況が変わってしまいました。
iOSではFlashはサポートされません、ていうか超悪者扱いです。
iPhone, iPad対応のコンテンツでは、ジョブズさんはHTML5(<video>)+h.264一択なのでHTML5を使わざるえません。
PC向けはどうする?
どう分岐する?

そんな面倒くさいことを一手に引き受けてくれる便利なライブラリが色々登場しているみたいです。

Browserと動画フォーマット

videoタグでサポートされている動画フォーマットがBrowser毎に違うのが大きな問題です。

h.264
IE9, Safari, iOS, Android

WebM
IE9*, Firefox 4以降, Opera 10.60以降, Chrome

*IE9はVP8 CODECをインストール

IE9 IE6-8 Firefox Opera Safari Chrome iOS Android
h.264 - - - *◯
WebM - - - -

*Chromeはh.264には対応しないと言いながらサポートを続けています。

Video Playerライブラリ

HTML5 Video Playerライブラリは次のように考えられて作られているようです。

動画はh.264だけでもOK。
IE9, Safari, iOS, AndroidはHTML5で再生。
未対応ブラウザはFlashを使用し再生。

ブラウザ対応やプレイヤUIのためにJavaScriptとCSS, 画像ファイルが同梱されています。

動画はh.264だけ作ればすみます。
WebMも作ったらFlashで再生はIE6-8だけになります。

ライブラリ選択
VideoSWS* : HTML5 Video Player Comparison
http://praegnanz.de/html5video/
コチラが参考になりました。
数あるライブラリを検証し機能比較とデモおよびお勧めを掲載してくれています。

VideoJS
http://videojs.com/

スキンでデザインをカスタマイズ可能です。
始めから良く出来たスキンが添付されています。
主立ったCMSのPluginが用意されています。

APIドキュメントはあるにはあるのですが…
https://github.com/zencoder/video-js/blob/master/docs/API.markdown
demoファイルがあるのでそちらを見てくれな感じになっています。

MediaElement.js
http://mediaelementjs.com/

ドキュメントがしっかりしているので安心して使えそうです。

下記の表はMediaElement.jsのものです。

IE9
IE9
IE6-8
IE6-8
Firefox
Firefox
Opera
Opera
Safari
Safari
Chrome
Chrome
iPhone/iPad
iOS
Android
Android
Windows Phone 7
WP7
h.264 only HTML5 Adobe Flash Adobe Flash Adobe Flash HTML5 Adobe Flash3 HTML5 HTML5 Native
WebM only HTML51 Flash112 HTML5 HTML5 Flash112 HTML5 - - -
WebM + h.264 HTML5 Adobe Flash HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 Native
WMV HTML5 Silverlight Silverlight Silverlight Silverlight Silverlight - - Native
FLV Adobe Flash Adobe Flash Adobe Flash Adobe Flash Adobe Flash Adobe Flash - Adobe Flash -
MP3 HTML5 Adobe Flash Adobe Flash Adobe Flash HTML5 HTML5 HTML5 Native Native

表のようにブラウザ毎に対応させているらしい。

有料のPlayer
JW Player
Shadowboxにも添付されている老舗longtail videoのPlayerです。
Flash Videoのためのものだと思っていたのですが、いつのまにかHTML5 Videoにも対応してたんですねぇ。

SublimeVideo
美しいスキンのPlayerです。
VideoSWS*も同じ感想のようですが、ちょいとお高めです。
金にものを言わせることが出来るプロジェクトだったら使ってみたいと思いました。

【最後に】
Quicktime, Real Video, Windows Mediaとフォーマットが対立していた不毛な時代に戻りたくないのは制作側もユーザーも同じ思いでしょう。
ブラウザやOSでの差異はそれぞれの思惑もあるので統一されるのはなかなか難しい話なのかもです。
優れたライブラリが多数登場してくれているおかげでHTML5時代はなんとか乗りきれるかも知れません。

なにがあるのか分からないのがWebなので安心はしていませんが…

update 2011-07-26
ライセンスに注意!
VideoJSのソースを見たところ、Flash(swf)はサードパーティーの flowplayer を使うようになっていました。
flowplayer は有償です。
無料版もありますがロゴの表記をしないといけないなどの条件があるので企業サイトでは使用しにくいかもしれません。

HTML5 Video Player のネックはIE8までの対応いかんにかかっているようです。
IE9未満だとFlash(swf)を使用せざるえません。
自前で作ってしまえばいいんですけど。

Flash(swf)が添付されてるMediaElement.jsが無難なのかもです。

7 Comments

  1. 大変参考になりました。
    それにしてもこのままFLV(FMS?)は衰退していくのでしょうか・・

  2. コメントありがとうございます。
    さて、どうなんでしょう。FLVの未来、気になります。

  3. もしご存知でしたら教えてください。
    「MediaElement.js」対応表でFLV形式のファイルの再生は各ブラウザともに「f」のマークが付いていますが、このjsを使用して再生できないという意味なのでしょうか?

    「MediaElement.js」公式サイトを見てもflvについては上記表以外は触れられていないようでした。

    イメージ的にはこのjsでラップすることで「*.flv」ファイルを、表向きにはHTMLタグで再生してくれるような感じを期待していたのですが・・

  4. MediaElement.jsの本家ページなどを見てもFLVファイルの再生方法について特に触れられていないようなのですが、MediaElement.jsを使用してHTML5のタグから動画を再生することはできるのかをご存知でしょうか?それともMediaElement.jsを使用した場合でも従来通りJSやオブジェクトタグのようなものを使用してFLVを再生してあげないといけないのかな・・MediaElement.jsがラップしてそのへんを吸収してくれるイメージだったのですが・・^^;

  5. videoタグでFLV再生は不可能なのでわざわざ使用しなくても良いのではないでしょうか。

  6. こんにちは、レスありがとうございます。実はしばらくはFLVを使用しながら徐々にHTML5が対応するフォーマットへと移行することを想定していまして、できるだけ簡単に共存するためにどうしたらよいかと模索中です。ゴリゴリ処理を分岐してしまえばいいんですけど、なるべく分岐を少なくして共存させたかったので・・^^;

  7. FLVだけでしたら付属のFlash製Video Playerを使って再生させれば良いように思います。
    H.264 CODECだったらFLVでなくmp4で書き出せば、それこそ手間がかからないです。

コメントを残す