今回は、bunny.net の再生プレイヤーのカスタマイズについて説明します。
デフォルトのプレイヤーは、オレンジ基調のカラーです。表示言語は英語表記となり、この状態でも操作に不自由は感じませんが、カスタマイズすることでよりフィットしたプレイヤーをデザインすることができるでしょう。
カスタマイズは「Player」メニューから設定します。この画面では、プレイヤーのカラー設定から、ボタンの表示・非表示など、さまざまな設定ができます。各機能の設定は下記のようになります。
プレイヤーの表示言語を変更します。Japaneseに設定すると、英語表記を日本語表記に変更できます。
表示フォントの変更します。ただし変更可能なフォントが欧文フォントのため、日本語部分は変わりません。
プレイヤーの基本色を変更します。カラーコードの指定もできるため、自由度は高いです。Webサイトのカラーに合わせて変更するといいでしょう。
字幕の文字サイズ、色、背景色を変更します。
プレイヤー操作に関わるボタンの表示・非表示を変更します。各コントールボタンの意味は次のようになります。
| 1 | Play / Pause | 再生 / 一時停止 |
| 2 | 10s Backward | 10秒戻る |
| 3 | 10s Forward | 10秒進む |
| 4 | Progress | プログレス・シークバー |
| 5 | Current Time | 現在時刻 |
| 6 | Duration | 持続時間 |
| 7 | Mute | 消音 |
| 8 | Volume | 音量 |
| 9 | Captions | 字幕（未設定の場合、非表示） |
| 10 | Settings | 設定 |
| 11 | Picture-in-Picture | ピクチャー・イン・ピクチャー |
| 12 | Full Screen | フルスクリーン |
| 13 | Big Play Button | 中央の大きな再生ボタン |
プレイヤーに独自のCSSを適用して外観を変更します。
プレイヤー上に、視聴が多い部分をヒートマップ表示します。データが蓄積されると表示されるようになります。
bunny.net のプレイヤーは、必要にして十分なカスタマイズを持っている思います。また、設定はビデオライブラリー単位となるため、ライブラリーごとに複数のプレイヤーデザインを設定することもできます。
