LoginSignup
2

More than 1 year has passed since last update.

はじめに

VideoJSはウェブ上のビデオプレイヤーです。
公式サイト: https://videojs.com/
OSS Repository: https://github.com/videojs/video.js

公式サイトによりますと450,000サイト以上が利用されています。
この記事を記録際にはVideoJSのGithubでは30.1KStarを持って、他プレイヤーに比べれば一番最多と見られます。

HTML5ビデオプレイヤーはもうすでにあるのに、どうしてVideoJS使いますか?

確かに、HTML5には<video>タグが追加されて、あれを使えばいいでしょうという課題ができますね。
VideoJSを利用する理由はこちらです:

  • スタイリング

ブラウザーによって、ビデオコントロールパネル、ボタン、 Seekbarなどのスタイリングは違っています。
以下の例をご覧ください

Google Chrome
image.png

Mozilla Firefox
image.png

Safari
image.png

三つのメージャーブラウザー上に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/
問題はいかにリストします

  1. 英語版のみ
    videojs自体はinternationalizationがサポートしますが、開発者用のドキュメントは英語だけしかない。
    全く英語わからない方は翻訳サービスに頼ることになります

  2. 不完全
    たまに、GithubでIssueを上げてからものがわかることがあります。
    わからない時にも、内部コードを見るしかない時もあります
    例: https://github.com/videojs/video.js/issues/2730

  3. 古いバージョンのドキュメンテーションがない

代わり

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2