HTML5 ビデオプレイヤーの videojs を使ってみよう

HTML5 ビデオプレイヤーの videojs を使ってみよう
2014年11月30日　k.taguchi

こんにちは、田口です、今回はオープンソースのHTML5 ビデオプレイヤーの videojs を試してみようと思います。このプレイヤーの開発元は動画配信プラットフォームのBrightcove（ブライトコーブ社）のため、結構本格的な作りです。今回は、まずということでデモを動かしてみましょう。

サイト上のDOWNLOADリンクから、ファイルをダウンロードします。ファイルを解凍して中をみてみると、video-js フォルダが入っています。

20141130-2.fw
とりあえずデモを動かす程度ならば、このフォルダをそのまま、FTPでサーバー上にアップロードするだけで十分です。この video-js フォルダの中には、demo.htmlファイルが入っています。このファイルをブラウザからアクセスしてみると、プレイヤーとデモ映像を確認することができます。

20141130-3
このように表示されればOKです。

実際の動画
https://bizvalley.co.jp/asset/01/video-js/demo.html

利用する場合は、demo.htmlやCSSなどをカスタマイズするとプレイヤーの色を自由に設定できたり、1.5倍速など早送り再生機能を付けることもできます。特にFlashのプレイヤーでは、早送り再生はできないので、特に教育系の動画では重宝する機能ではないでしょうか。いろいろ機能がついていますので、Youtubeではなく自前で動画を配信したい場合、プレイヤーの候補として有力な一つになると思います。

※ Flashでどうしても早送り再生したい場合は、動画自体をエンコード時に早送り状態、例えば1.5倍速で標準再生されるようにエンコードします。そして、1倍速から1.5倍速に切り替えるとき、再生位置を記憶して動画ファイルをすり替えます。つまり、ｘ倍速分の動画ファイルが必要になり、サーバー上のディスク容量も消費しますが、動画の本数が少ない場合は、有用な方法です。

こちらの関連記事もどうぞ！