HTML5のvideoタグをパワーアップしてくれるライブラリまとめ
HTML5では動画の再生をvideoタグによってサポートしています。しかし動画の標準フォーマットは定まっておらず、SafariやIEが推すH.264、Google ChromeやFirefoxが推すWebMと各社の思惑によって採用技術が異なっているのが実情です。
また、標準のvideoタグよりもリッチな機能を提供してくれたり、IE8などvideoタグをサポートしないブラウザ用のフォールバックを提供してくれるライブラリも存在します。今回はそうしたライブラリを紹介します。
maccman/flarevideo
レガシーなブラウザでも対応できるよう、HTML5/Flashを自動的に切り替えてくれます。ブラウザはIE7以降に対応しています。機能としてはCSS/JavaScriptによるカスタマイズ、フルスクリーンサポートとなっています。
HTML5 Video Voting | Playground from ZURB
動画プレーヤに投票機能を追加しています。スペースキーを押したタイミングで投票が行われます。これにより、他の閲覧者がどこで一番楽しいと思ったのかが分かるようになっています。
HTML5 Video Voting | Playground from ZURB
Popcorn.js | The HTML5 Media Framework
動画とスライドなど、HTMLコンテンツと連携した動画再生ができるようになります。プレゼンテーションの再生などに使うと良さそうです。
Popcorn.js | The HTML5 Media Framework
jPlayer : HTML5 Audio & Video for jQuery
jQuery/Zeptoプラグインとして動作する動画プレーヤです。HTML/CSSによるカスタマイズが可能です。HTML5とFlashの自動切り替えに対応しており、IE6からサポートされています。Android/iOSにも対応しています。
jPlayer : HTML5 Audio & Video for jQuery
HTML5 Video Player | Video.js
CDNで配布もされており、スクリプトタグを埋め込むだけですぐに使える手軽さが売りです。jQueryは必須としておらず、全体でも100KB以下の軽量なスクリプトになっています。
Projekktor | The Free Web Video Player
再生前に広告を差し込む、フルスクリーン、プレイリスト、Flash&RTMPサポート、VLC Webプラグインサポート、動画品質選択、HTMLコンテンツ連動といった機能があります。テーマ、JavaScript APIもあり、カスタマイズも容易です。
Projekktor | The Free Web Video Player
etianen/html5media
videoタグをレガシーなブラウザにも対応させます。video/audioタグに対応しています。
video4all – tag support for every browser – Google Project Hosting
IE6、Firefox 2.0以降からvideoタグを使えるようにするライブラリです。実際にはFlashを使います。
video4all – tag support for every browser – Google Project Hosting
いかがでしたか。videoタグの問題としてはレガシーブラウザへの対応があるようです。そのため、各ライブラリともにレガシーなブラウザ対応をきちんと考えています。また、iOS/Androidといったスマートフォンでも問題なく使えるかといった点も大事です。
ちょうど今日リリースされたFirefox 33がOpenH264でH.264コーデックをサポートしました。これで、動画配信のデファクトコーデックはH.264になっていきそうです。配信コーデックを1つにまとめることができるようになれば、制作コストも下がり、videoタグの利用も進みそうです。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
現在コメントは受け付けていません。