Web Video Player, VideoJSの紹介

Posted at 2020-12-11

はじめに

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

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

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

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

Google Chrome

Mozilla Firefox

Safari

三つのメージャーブラウザー上に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順で記載します