前回はVideo.jsの紹介と導入をしました。

今回はVideo.jsの具体的なカスタマイズを行なっていきます。

Video.jsのオプションを使ってみる

videoタグには自動再生やループ再生などを行うための様々な属性があります。
ここではVideo.js特有の設定を一部ご紹介していきます。videoタグだけでは出来ないことも出来るようになります。

JavaScriptでオブジェクトを作成し、オプションを設定します。

const player = videojs('video', {
controlBar: {
skipButtons: {
forward: 5,
backward: 10
}
},
playbackRates: [0.8, 1, 1.3, 1.5],
notSupportedMessage: '動画再生できません！'
});

上記のオプションを解説していきます。

controlBar.skipButtons

動画に秒送り・戻しボタンを追加します。
forward:数値 で何秒送るかを指定します。
backward:数値 で何秒戻すか指定出来ます。
Video.js秒送り

playbackRates

動画に再生速度を変更するボタンを追加します。
数字を入れることで指定の再生速度を選択することが出来ます。
Video.js 再生速度

notSupportedMessage

ビデオが再生出来ない時に表示するメッセージを設定します。
Video.js エラー

他にも動画の比率を指定するaspectRatioや動画部分を非表示にして音声のみを流すaudioOnlyModeなど、ここでは紹介しきれないくらいオプションがまだまだあります。
詳しくは公式サイトを参照してみてください。
https://videojs.com/guides/options/

cssを使用する

Video.jsを導入するとDOMが大きく変わります。

導入前のDOMは下記のようにシンプルなものになります。
Video.js導入前

Video.jsを使うと、DOMが下記のように大きく変わります。
動画プレーヤーの各機能がHTML要素として分けられているのです。

Video.js導入後

これらの要素にcssでスタイルを当てることでカスタマイズが出来るようになります。

試しに少しYouTubeっぽくしてみましょう。
加工前はこちらです。
動画カスタマイズ前

検証ツールで変更対象のクラスを調べ、cssを追加していきます。

.video-js .vjs-play-progress {
background-color: #c4302b;
}
.video-js .vjs-play-progress:before {
color: #c4302b;
}

動画カスタマイズ後
これだけでシークバーがYouTubeっぽくなりましたね。
このようにスタイルを変えたい要素のcssを記述することでプレーヤーのデザインを変えることが出来ます。

まとめ

Video.jsを使うことで出来るカスタマイズをご紹介してきました。
割と簡単に機能追加やデザイン変更が出来ましたね。

Video.jsにはまだまだ有用なオプションあります。
気になったら公式サイトを参考にしてみてください。