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倍速に切り替えるとき、再生位置を記憶して動画ファイルをすり替えます。つまり、ｘ倍速分の動画ファイルが必要になり、サーバー上のディスク容量も消費しますが、動画の本数が少ない場合は、有用な方法です。

-

【正社員募集のお知らせ】
当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。
詳しくは【人材募集】のページをご覧ください。※モバイルページでご覧の方はPC版のTOPにリンクがございます。

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