##はじめに
VideoJSはウェブ上のビデオプレイヤーです。
公式サイト: https://videojs.com/
OSS Repository: https://github.com/videojs/video.js
公式サイトによりますと450,000サイト以上が利用されています。
この記事を記録際にはVideoJSのGithubでは30.1KStarを持って、他プレイヤーに比べれば一番最多と見られます。
##HTML5ビデオプレイヤーはもうすでにあるのに、どうしてVideoJS使いますか?
確かに、HTML5には<video>
タグが追加されて、あれを使えばいいでしょうという課題ができますね。
VideoJSを利用する理由はこちらです:
- スタイリング
ブラウザーによって、ビデオコントロールパネル、ボタン、 Seekbarなどのスタイリングは違っています。
以下の例をご覧ください
三つのメージャーブラウザー上にNative HTML5のビデオスタイリングでした。見るとだいぶ違っていますね。
UX的にはこれは良くない、ユーザー用のドキュメントを作成するも面倒になるでしょう。
VideoJSではどんなブラウザーであっても、Stylingは一緒です。
そのスタイリングでも好みに応じて編集することが簡単にできる。
-
Adaptive Bitrate Streaming対応
VideoJSはAdaptive Bitrate Streaming ProtocolというHLSとMPEG-DASHを提供しています。
その二つの中にHLS streaming Protocolは一番人気とみられていますがPCブラウザーでのNative Supportは現在、Safariしか持っていません。
そのため、追加開発が必要になってしまいます。
VideoJS Version 7以上にはPluginなしでHLS利用することができます。このライブラリのおかげで
https://github.com/videojs/http-streaming
VideoJS Version 6には手動で導入することができます。
##問題
どんな良くても、製品としては問題は確かにあります。今回はバグの話じゃなくて、他の問題を記事したいと思います
- ドキュメンテーション
ドキュメンテーションはこちらで見ることができますhttps://docs.videojs.com/
問題はいかにリストします
-
英語版のみ
videojs自体はinternationalizationがサポートしますが、開発者用のドキュメントは英語だけしかない。
全く英語わからない方は翻訳サービスに頼ることになります -
不完全
たまに、GithubでIssueを上げてからものがわかることがあります。
わからない時にも、内部コードを見るしかない時もあります
例: https://github.com/videojs/video.js/issues/2730 -
古いバージョンのドキュメンテーションがない
##代わり
OSS Video PlayerはVideo.jsだけではありません。他のOSSプロジェクトもあります。
他のプロジェクトはGithub Star順で記載します
- Plyr
公式サイト: https://plyr.io/
OSS Repository: https://github.com/sampotts/plyr
Star: 18.7K
- MediaElement.js
公式サイト: http://www.mediaelementjs.com/
OSS Repository: https://github.com/mediaelement/mediaelement
Star: 7.5K
- jPlayer
公式サイト: http://jplayer.org/
OSS Repository: https://github.com/jPlayer/jPlayer
Star: 4.6K
##参考