Video.jsのカスタマイズ(VideoCaptionsプラグイン)

概要

VideoCaptionsプラグインでは Video.js を使用した動画プレイヤーを提供します。

プレーヤーの外観

Video.js 8.xを利用している場合、ファンクションタグ「mt:videojsscript」「mt:embedvideo」の両方に属性「theme="pcmsx"」を付与するとPowerCMS Xオリジナルの外観になります。

  <mt:videojsscript link="8" theme="pcmsx" />
</head>
<body>
  <mt:embedvideo object_id="1" theme="pcmsx" playsinline script />

Video.jsのオプション設定

ファンクションタグ「mt:embedvideo」の属性「options」にVideo.jsのオプションを渡すことで設定変更できます。

例えば、再生開始時にミュートにしたり再生速度の選択肢を変えたりする場合は下記のように記述します。フルスクリーン表示方法もここで設定します。

<mt:setvarblock name="videojs_options">
{
  muted: true, // ミュートの設定
  playbackRates: [0.5, 1, 2], // 再生速度選択肢の設定
  preferFullWindow: true, // falseにするとブラウザネイティブのフルスクリーン表示
}
</mt:setvarblock>
<mt:embedvideo object_id="1" theme="pcmsx" playsinline options="$videojs_options" script />

Video.jsのオプションは、下記ページで詳しく解説されています。

Video.js完全マニュアル part6 〜Video.js特有のオプション〜 #JavaScript - Qiita

PowerCMS Xが提供する機能の設定

<mt:setvarblock name="videojs_options">
{
  pcmsx: {
    breakPoint: 768,   // 設定などプレーヤーの表示が切り替わるブレークポイント(CSSの調整も必要です)
    miniPlayer: false, // ミニプレーヤー(画面右下などに動画を小さく表示する機能)の有効/無効
  }
}
</mt:setvarblock>
<mt:embedvideo object_id="1" theme="pcmsx" playsinline options="$videojs_options" script />

プレーヤーの画角

ファンクションタグ「mt:embedvideo」の属性「class」で「video-js vjs-16-9」のように設定します。(「video-js」も必ず含めてください。)選択できる画角は以下の通りです。以下に当てはまらない画角の場合はCSSの「aspect-ratio」等を利用して設定してください。

vjs-16-9
vjs-9-16
vjs-4-3
vjs-1-1

<mt:embedvideo object_id="1" class="video-js vjs-16-9" theme="pcmsx" playsinline script />

同時に複数の動画を配置する

PowerCMS Xオリジナルの外観を利用しつつ同時に複数の動画を配置する場合は、必ず属性「id」を設定してください。(属性値は任意)

<mt:embedvideo object_id="1" id="onomichi" theme="pcmsx" playsinline script />

プレーヤーの外観を好みのスタイルに調整する

アイコン

CSSとアイコンフォントを用いて変更できます。

powercmsx/plugins/VideoCaptions/src/icons/にアイコンを格納します
powercmsx/plugins/VideoCaptions/ディレクトリでnpm iを実行し依存モジュールをインストールします
powercmsx/plugins/VideoCaptions/ディレクトリでnpm run iconを実行しアイコンを生成します
powercmsx/plugins/VideoCaptions/dist/fonts/内に出力されたアイコンフォントをBase64エンコードしてCSSに埋め込んだ後、ボタン毎にアイコンフォントを適用します

@font-face {
  font-family: movieicons;
  font-style: normal;
  font-weight: normal;
  src: url("data:application/font-woff;charset=utf-8;base64,d09GRgAB(省略)==") format("woff");
}

.vjs-control-bar .vjs-play-control .vjs-icon-placeholder::before {
  font-family: movieicons;
  content: "\f105"; /* アイコン毎に値が変わります */
}

アイコン以外

プレーヤーを表示させ、開発者ツールで調査しながらCSSを調整します。

※video8.pcmsx_player.cssのSassファイルがpowercmsx/plugins/VideoCaptions/src/scss/にあります。

サンプルのビュー

VideoCaptionsプラグインの下記のディレクトリにサンプルとなるビューを同梱しています。

plugins/VideoCaptions/theme/views

PowerCMS Xに同梱されているテーマ「Website」のページ用ビュー「(Website) Page」に適用する場合のビューとなります。
pageモデルに対して、FileUploader プラグインを使用した動画ファイルのアップロード用カラムを追加した場合のビューです。