勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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を見てみるとそこまでソースコードの量が多いわけではないので、ここからさらにカスタマイズとかもできそう。

 - JavaScript

  関連記事

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...

VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法

Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...

ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...

Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法

以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...