Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPressのようなテーマ機能が搭載されているみたいで、デフォルトのもの以外にも4つテーマがあった。以下にテーマの設定方法をサンプルをメモ。

themes

GitHub

https://github.com/videojs/themes

CDN

CDNで使う場合は以下を記述する。

<link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet">
<link href="https://unpkg.com/@videojs/themes@1/dist/forest/index.css" rel="stylesheet">
<link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet">

尚、全て読み込む必要は無く、利用したいテーマのcssのみ読み込めば良い。

サンプル

https://taitan916.info/sample/Video.js/theme/

利用方法

videoタグにテーマのclassを付与

videoタグにテーマのclassを「vjs-theme-テーマ」という形で付与する。cityというテーマを利用したい場合以下のようにclassを付与する。

<video class="video-js vjs-theme-city"></video>

所感

テーマ用のCSSを見てみるとそこまでソースコードの量が多いわけではないので、ここからさらにカスタマイズとかもできそう。