プレーヤ コンポーネントのカスタム スキン

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

BEML を使用して、プレーヤ コンポーネントのそれぞれの要素に、カスタム スキンを設定することができます。スキンは自分で作成し、ホストする画像ファイルであり、BEML プレーヤ コンポーネントの一部の機能の外観を変更するために使用できます。たとえばスキンを使用することで、プレーヤ全体の背景のスタイルを設定したり、サムネイルがない場合に使用されるデフォルト画像を変更したり、プレーヤのボタンの見た目を変更することができます。カスタム スキンを使用すれば、プレーヤ テンプレートの外観をきめ細かく調整することができます。

プレーヤの見た目をカスタマイズする他の方法とカスタム スキンを比較すると、次のような違いがあります。

別の方法について概要を知るには、「プレーヤ カスタマイズ オプション」をお読みください。BEML の概要と関連するヘルプ トピックの一覧は、「BEML を使用してプレーヤをカスタマイズする」を参照してください。

プレーヤ コンポーネント要素のスキン

BEML プレーヤ テンプレートで定義し、プレーヤに表示するコンポーネントには、それぞれ複数の要素を使用でき、それらのスタイルをカスタム スキンで個別に設定することができます。ボタンやタブなどの要素にスキンを追加する場合、スキンは要素に含まれるすべてのアイコンやテキストの背後に表示されます。たとえば TabBar では、以下の要素にスキンを使用できます。

  • タブ
  • ドロップダウン リストの背景
  • ドロップダウン リストに含まれる各アイテムの背景
  • ドロップダウン リストの上ボタンの背景
  • ドロップダウン リストの下ボタンの背景

カスタム スキン コンポーネント リファレンスに、VideoPlayer、List、TileList、TabBar、ComboBox、MediaControls、および TextRegion コンポーネントで、スキンを使用できる要素の一覧を示します。

カスタム スキンの例

カスタム スキンでどのようなことができるのか、例を見てみましょう。まずはこのプレーヤです。Widescreen with Horizontal List と類似のテンプレートを使用しています。

スキン適用前のプレーヤ

そしてこれが、いくつかのコンポーネントにスキンを適用した後の、同じプレーヤ テンプレートです。

プレイヘッドのライン、サムネイル、ページング ボタン、およびプレーヤ クローム（コントロール ボタンの背景部分）にカスタム スキンを追加して、プレーヤをカスタマイズしました。この .zip ファイルに、カスタム スキンで使用した .png 形式の画像ファイルが含まれています。このプレーヤのカスタマイズ方法の詳細は、カスタム スキン プレーヤの例を参照してください。

コンポーネントのカスタム スキンを作成する

カスタム スキンを使用するには、まずスキン用の画像ファイルを作成する必要があります。スキンには、透過性を持たせることができる .png ファイルの使用をおすすめします。要素のスペースに合わせて画像が拡大されるため、透過性があれば大きなメリットになります。この特性をいかせば、.png の大きさはスペースに合わせ、中身の画像はそれより小さくすることが可能です。また、上図のスキンを適用したサンプル プレーヤのクロームのように、要素を半透明にすることもできます。

スキンのサイズは、そのプレーヤ コンポーネントの BEML 定義によって決まります。たとえば、List コンポーネントでサムネイルが 120 x 90 に設定されている場合、サムネイルのオーバーレイ スキンは 120 x 90 であれば拡大されません。

スキンを使用可能な各プレーヤ コンポーネント要素のためのスキンの画像（.png）ファイルと Photoshop テンプレート（.psd）ファイルをまとめた .zip ファイルをダウンロードできます。これらのサンプルおよびテンプレート ファイルは、独自のスキン画像ファイルを作成したり、スキンの適正サイズを把握するために役立ちます。

BEML を使用してコンポーネントにカスタム スキンを適用する

カスタム スキンを作成すると、BEML カスタム プレーヤ テンプレートでコンポーネントに追加できます。BEML コンポーネントのスキンに適用可能な要素には、それぞれキー名があります。キー名の一覧は、カスタム スキン コンポーネント リファレンスにあります。コンポーネント要素のキー名を、スキン画像ファイルをホストしている URL にマッピングすることで、BEML コンポーネントにカスタム スキンを追加します。これを行うには、2 つの方法があります。

個々のコンポーネントの要素内でスキンを設定する

コンポーネントのインスタンスを定義する BEML 要素内で、コンポーネントの style 属性を使用して、コンポーネントの機能にカスタム スキンを設定することができます。たとえば、次のように ComboBox のボタンとアイテムにカスタム スキンを設定できます。

<ComboBox style="button-skin:http://server/skin1.jpg;item-skin:http://server/skin2.jpg" />

複数のプロパティは、このようにセミコロンで区切って設定します。

Theme 要素および Style 要素でスキンを設定する

プレーヤ テンプレートの Theme 要素にある Style 要素を使用して、プレーヤ テンプレートのすべてのコンポーネントにスキンを設定することができます。BEML で Theme タグや Style タグを使用してスタイルを設定するには、次のようにします（上記の例と同じキーを使用します）。

<Theme name="Deluxe" style="Light">
   <Style class="ComboBox">
     <![CDATA[
.button {
  skin:http://server/skin1.jpg;
}
.item {
  skin:http://server/skin2.jpg;
}
     ]]>
   </Style>
</Theme>

それぞれのセレクタの前にピリオドを付けます（例: .button）。キーにあるハイフンの前の部分がセレクタで、後ろの部分がプロパティです。つまり、button-skin:value は .button { skin:value; } となります。

Theme タグや Style タグを使用してスキンを割り当てる場合は、次のようにセレクタを繰り返し使用することはできません。

// 間違い !!
.playheadWell {
unloadedSkin:http://server/skin1.jpg;
}
.playheadWell {
bufferedSkin:http://server/skin2.jpg;
}
.playheadWell {
watchedSkin:http://server/skin3.jpg;
}

これは、1 つのセレクタにまとめる必要があります。

.playheadWell {
unloadedSkin:http://server/skin1.jpg;
bufferedSkin:http://server/skin2.jpg;
watchedSkin:http://server/skin3.jpg;
}

ボタン アイコンを変更する

以上のカスタム スキンを使用した方法では、ボタンの背景は変えられますが、ボタンに表示されるアイコンやテキストを変更することはできません。ボタンのアイコンやテキストを変更するには、ボタンの iconName 属性（Button または ToggleButton コンポーネント）あるいは toggledIconName 属性（ToggleButton コンポーネント）を使用します。iconName には、標準アイコン（メニュー、再生、一時停止、ボリューム、最大化、最小化、共有、リンク、コード）のいずれか、またはホストされている画像のパスを設定することができます。

注意と制約事項

さまざまな BEML コンポーネントのカスタム スキンを作成する際に、注意すべきことがいくつかあります。

  • 作成したカスタム スキンは、プレーヤがフルスクリーン モードのときには表示されません。ただし、動画自体の背景は表示されます。
  • 一部の BEML コンポーネントには showBack 属性があります。この属性では、グラフィックの背景を表示するかどうかを制御します。コンポーネントに showBack="false" が指定されていると、カスタム スキンは表示されません。
  • 現在、メニュー画面にスキンを設定し直すことはできません。
  • さまざまな状態を持つ要素にスキンを追加すると、その要素のロールオーバ、ダウン、非アクティブの個別の状態を表示することができなくなります。ただし、スキンを使用できる要素の多くには、これらの状態に対応したアイコンがあります。

 

 

タグ
design, スキン