Skip to content

HTML5のvideoタグをパワーアップしてくれるライブラリまとめ

by : 2014/10/15

HTML5では動画の再生をvideoタグによってサポートしています。しかし動画の標準フォーマットは定まっておらず、SafariやIEが推すH.264、Google ChromeやFirefoxが推すWebMと各社の思惑によって採用技術が異なっているのが実情です。

また、標準のvideoタグよりもリッチな機能を提供してくれたり、IE8などvideoタグをサポートしないブラウザ用のフォールバックを提供してくれるライブラリも存在します。今回はそうしたライブラリを紹介します。

maccman/flarevideo


レガシーなブラウザでも対応できるよう、HTML5/Flashを自動的に切り替えてくれます。ブラウザはIE7以降に対応しています。機能としてはCSS/JavaScriptによるカスタマイズ、フルスクリーンサポートとなっています。

maccman/flarevideo

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以下の軽量なスクリプトになっています。

HTML5 Video Player | Video.js

Projekktor | The Free Web Video Player


再生前に広告を差し込む、フルスクリーン、プレイリスト、Flash&RTMPサポート、VLC Webプラグインサポート、動画品質選択、HTMLコンテンツ連動といった機能があります。テーマ、JavaScript APIもあり、カスタマイズも容易です。

Projekktor | The Free Web Video Player

etianen/html5media


videoタグをレガシーなブラウザにも対応させます。video/audioタグに対応しています。

etianen/html5media

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

HTML5企業Webシステムのための開発プラットフォーム

From → まとめ, HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。