カスタム スキン プレーヤの例

Product
Video Cloud
対象となる役割
開発者
バージョン
Brightcove 5
モジュール
BEML
エディション
Pro, Enterprise
作成者 Ethan Pettyjohn.

プレーヤ コンポーネントのカスタム スキンに関する入門用トピックでは、カスタム スキンを使用してカスタマイズしたプレーヤ例を紹介しました。このトピックでは、プレーヤがどのようにカスタマイズされたか、さらに詳しく見てみましょう。カスタム スキンの適用前と適用後の画面ショットです。

適用前と適用後

「適用前」のプレーヤでは、Widescreen with Horizontal List テンプレートと類似のプレーヤ テンプレートを使用しています。「適用後」のプレーヤにするために、次のプレーヤ コンポーネントにカスタム スキンを追加しました。

これらのスキンに使用したすべての .png ファイルが含まれている .zip ファイルをダウンロードできます。スキンを適用したプレーヤのために、完全な BEML プレーヤ テンプレートをダウンロードすることもできます。

VideoPlayer 要素

playerChrome

プレーヤ コントロールの背景です。プレーヤ コントロール ボタンの背後に表示されます。

playerChrome

標準のテンプレートで使用されている Light スタイルと比べて、このクロームの色はかなり暗いので、ボタン テキストを明るい色にして、暗い背景で目立たせる必要があります。これには、プレーヤを Publishing モジュールのスタイル エディタで開きます。水中をイメージした配色に合わせて、[VideoPlayer: Buttons] セクションで、[Text] と [Icons] の色を白にし、[Rollover Text] と [Rollover Icons] を水色にします。Time 要素と Volume Control 要素の色も、同様に配色を調整します。

スタイル エディタ

また、動画の主題が「水中」なので、それに合わせて水中の背景画像を追加しました。

水中の背景画像

この BEML コードは、プレーヤ テンプレートの VideoPlayer の Style タグにある playerChrome を示します。

<Theme name="Deluxe" style="Light">
<Style class="VideoPlayer"><![CDATA[
.playerChrome {
skin:http://hostname/filename-playerChrome-skin.png;
    }
...

プレイヘッドとプレイヘッドのライン

プレイヘッドとプレイヘッドのラインは、動画再生の進行状況を示します（プログレッシブ ダウンロードの場合は、バッファ状況も示します）。視聴者がプレイヘッドを動かして、動画再生の送り戻しをすることもできます。この例では、playhead の各種要素は VideoPlayer コンポーネントの一部になっていますが、他のプレーヤ テンプレートでは、playhead は 独立した MediaControls コンポーネントの一部になっていることがあります。配色に合わせて、playhead 要素の色を変更しています。playhead には次の要素があります。

playhead-skin

標準のプレイヘッドを、親しみのあるドットに替えます。水中というテーマに合う色を選択します。

プレイヘッドのスキン

playheadWell-unloadedSkin

playheadWell の unloadedSkin 要素は、プレイヘッドの一部で、プログレッシブ ダウンロード動画のバッファされていない部分に相当します。

playheadWell-unloadedSkin

playheadWell-bufferedSkin

playheadWell の bufferedSkin 要素は、プレイヘッドの一部で、プログレッシブ ダウンロード動画のバッファ済み部分か、ストリーミング動画の未視聴部分に相当します。

playheadWell-bufferedSkin

playheadWell-watchedSkin

playheadWell の watchedSkin 要素は、プレイヘッドの一部で、視聴者がすでに見た、プレイヘッドの左側部分に相当します。

playheadWell-unloadedSkin

この BEML コードは、VideoPlayer の Style タグにある playhead の各要素を示します。

<Theme name="Deluxe" style="Light">
  <Style class="VideoPlayer"><![CDATA[
...
.playhead {
    skin:http://hostname/filename-playhead-Skin.png;
    }
.playheadWell {
    unloadedSkin:http://hostname/filename-playheadWell-unloadedSkin.png;
    bufferedSkin:http://hostname/filename-playheadWell-bufferedSkin.png;
    watchedSkin:http://hostname/filename-playheadWell-watchedSkin.png;
    }
     ]]></Style>

 TileList 要素

プレーヤの例では、TileList コンポーネントを使用しています。これは、プレイリストにあるすべての動画のサムネイルと、視聴者がプレイリストを左右にスクロールするためのボタンを表示するものです。TileList コンポーネントは、次の要素のスキンを使用してカスタマイズしています。

thumbnail-skin

thumbnail-skin は、プレイリストにある各動画のサムネイル画像の背後に表示されます。このスキンは標準のサムネイル サイズよりも若干大きいため、各サムネイルの周りに縁取りができます。プレイリストの動画にサムネイルが割り当てられていない場合は、thumbnail-skin 全体が見えるようになります。

サムネイルのスキン

thumbnail-overlaySkin

thumbnail-overlaySkin は、リストにあるすべてのサムネイルの上に表示されます。この例では、視聴者がサムネイルをクリックすれば動画を再生できることを、「再生」アイコンで示しています。

サムネイル オーバーレイのスキン

pagingButtons-skin

これは、ページング ボタンの送りアイコン（>）と戻しアイコン（<）の背後に表示される背景です。標準テンプレートの丸いボタンの代わりに、四角いボタンを使用しています。また、採用している配色に合った色を使用しています。

ページング ボタンのスキン

pagingButtons-backSkin

pagingButtons-backSkin は、ページング ボタンにマウス ポインタを重ねたときにのみ表示されます。標準テンプレートの白い楕円を、暗い色合いの四角形の背景に替えています。

この BEML コードは、TileList の Style タグにある thumbnail 要素と pagingButtons 要素を示します。

<Style class="TileList"><![CDATA[
.thumbnail {
          skin:http://http://hostname/filename-thumbnail-skin.png;
          overlaySkin:http://http://hostname/filename-thumbnail-overlaySkin.png;
        }
.pagingButtons {
          skin:http://http://hostname/filename-pagingButtons-skin.png;
          backSkin:http://http://hostname/filename-pagingButtons-backSkin.png;
        }
     ]]></Style>

 

タグ
スキン