LoginSignup
3
2

More than 3 years have 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

参考

3
2
0

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
  3. You can use dark theme
What you can do with signing up
3
2