動画の閲覧に。HTML5の動画プレイヤー×6選

HTML5ではvideoタグによって動画の再生がサポートされていますが、デフォルトのままではOSに依存した動画プレイヤーで再生されるだけです。これはあまり使い勝手がよくないと感じている方も多いでしょう。字幕をつけたり、再生速度を変更したり、さらに音量調整も手軽に行いたいはずです。

そこでHTML5/JavaScriptで作られた動画プレイヤーを紹介します。Webサイトはもちろん、Webシステムの中に組み込んで使うこともできるでしょう。

thiagopnts/kaleidoscope: An embeddable, lightweight 360º video/image viewer

ちょっと特殊な全天球（360度）動画と画像の閲覧に最適なビューワーとなっています。デスクトップであればマウスで視点を変更できます。スマートフォンの場合はジャイロセンサーを使っているので、デバイスを動かすと視点が変更できます。

スマートフォンでも動かすため、デフォルトの動画機能で再生せずに一度データをバッファリングして埋め込みで再生できるようになっているのもポイントです。

thiagopnts/kaleidoscope: An embeddable, lightweight 360º video/image viewer

clappr/clappr: An extensible media player for the web.

拡張をサポートした動画プレイヤーです。画質の変更、360度動画、外部動画（YouTubeなど）再生、Chromecast、再生速度変更、再生開始場所指定など様々な機能が提供されています。ベースをClapprとして、カスタマイズして導入することもできるでしょう。

デザインはシンプルなので、どのようなサイトやシステムであっても導入しやすいかと思います。

clappr/clappr: An extensible media player for the web.

ableplayer/ableplayer: fully accessible cross-browser HTML5 media player.

動画だけでなく、音楽ファイルの再生にも対応しています。オーディオは一つだけでなく複数トラックの再生も可能です。字幕の表示であったり、指定箇所からの再生もできます。APIも公開されているので拡張も容易です。

SRTだけでなく、VTTという字幕フォーマットにも対応しています。機能が豊富なので、様々なパターンに対応できるでしょう。

ableplayer/ableplayer: fully accessible cross-browser HTML5 media player.

flimshaw/Valiant360: An in-browser 360 degree panorama video player.

360度の全天球動画を再生する動画プレイヤーですが、実装としてWebGLを使っているのが特徴です。WebGLなのでGPUを使ったレンダリングが行えています。ブラウザは限定されますが、IE11以降であれば再生できます。

flimshaw/Valiant360: An in-browser 360 degree panorama video player.

jplayer/jPlayer: jPlayer : HTML5 Audio & Video for jQuery

jQueryプラグインとして作られている動画、オーディオプレイヤーです。jQueryベースなので扱い勝手が良いケースは多そうです。HTML5だけでなく、FlashやRTMPもサポートしています。もちろんプラグインもあり、それもjQueryで書けます。

jplayer/jPlayer: jPlayer : HTML5 Audio & Video for jQuery

videojs/video.js: Video.js – open source HTML5 & Flash video player

動画プレイヤーのJavaScriptとしては最も多機能でよく知られたソフトウェアだと思います。スキンのカスタマイズ、プラグインによる拡張がサポートされています。テーマやアイコンを追加することで自分たちのサイトに最適化された動画プレイヤーが作れるはずです。

videojs/video.js: Video.js – open source HTML5 & Flash video player

最近では動画コンテンツも増えています。そんな中では動画プレイヤーのUIにもこだわりが必要になります。機能面においても他サイトで当たり前になっている機能が提供されていないとユーザはストレスを感じるでしょう。

動画を上手に活用していくためにも今回紹介したようなソフトウェアをうまく利用してください。