カスタムテーマとカスタムスキン

(Professional エディション以上でご利用いただけます)

Brightcove Video Cloud のプレーヤの見た目を変えたい場合、大きく分けて以下の 3 つの方法があります。

  • Publishing モジュールのスタイル機能を利用する
  • カスタムスキンを利用する
  • カスタムコンポーネントを利用する

このうち、一番最初のスタイル機能は Video Cloud Studio を使ったことのある方であれば割となじみがある機能かと思います。スタイル機能を使うと、ブラウザ上で色を設定したりロゴ画像をアップロードできたりと、WYSIWYG でプレーヤの見た目を編集できます。

スタイル機能だけでも見た目の印象を変えることが出来るのですが、コンポーネントの背景画像の変更などより高度な見た目の変更を行おうと思った場合、カスタムテーマやカスタムスキンを使うことになります。

カスタムスキンとは、各コンポーネント(たとえば再生停止ボタンやシークバー)の背景画像を外部の画像ファイルで置き換える際に利用します。
ヘルプサイトの『プレーヤ コンポーネントのカスタム スキン』には以下のようなカスタマイズ例が載っていますが、背景画像の置き換えだけでも見た目がずいぶん変わるのがご覧いただけるかと思います。

ただ、カスタムスキンには以下のような制約事項があります。

  • フルスクリーン時はスキンが適用されない
  • ボタンアイコン(再生停止ボタンのアイコンなど)の変更は行えない
  • 各パーツ毎に画像を用意しないといけないので、画像ファイルの数が多くなる

このような制約事項に対応できるのが、カスタムテーマです。
以下の例は、カスタムテーマでプレイヤーをカスタマイズする前と後の比較画像です。ご覧の通り、再生ボタンを「play」という文字に変更したり、再生ヘッドの周囲を角丸に変更していたりします。
また、上述のカスタムスキンの場合と異なり、フルスクリーンでもカスタマイズした見た目が適用されます。

カスタム プレーヤ テーマのページでは、カスタムテーマを作るのに必要な .fla ファイルをダウンロードできます。.fla ファイルのライブラリの中に各パーツ毎にスキンが格納されているのでスキンを編集し、パブリッシュして SWF を作成します。

パブリッシュしたプレーヤテーマの SWF ファイルは、BEML の theme 属性で URL を指定することで読み込みます。以下の例は、ChromelessVideoPlayer コンポーネントにカスタムテーマを適用する例です。
例: <ChromelessVideoPlayer id="videoPlayer" theme="http://example.com/ChromelessVideoPlayerTheme.swf">

カスタム プレーヤ テーマプレーヤ コンポーネントのカスタム スキンの詳細は、それぞれのヘルプページをご覧下さい。