カスタム スキン コンポーネント リファレンス

このトピックでは、BEML コンポーネントでのカスタム スキンの使用方法に関する詳細情報を提供します。プレーヤ テンプレートの全体的なテーマによって、スキンを適用できるコンポーネントの要素は異なります。以下の BEML コンポーネントごとに、各テーマ（Deluxe、Flat、または Minimal）を使用するプレーヤ テンプレートにおいて、スキンを適用可能なコンポーネント要素のキー名を表に記載しています。また、Deluxe テーマを例として、スキンを適用可能なコンポーネントの要素を図示しています。

• VideoPlayer
• List
• TileList
• TabBar
• ComboBox
• MediaControls
• TextRegion

カスタム スキンを作成して、BEML コンポーネントに適用する方法を見る

カスタム スキンを使用したプレーヤの詳細な例を見る

スキンを適用可能な各コンポーネント要素について記載されたサイズは、標準プレーヤ テンプレートにおけるデフォルト サイズに基づいています。これらの要素の多くは BEML でサイズ変更が可能であり、プレーヤをさらにカスタマイズすることができます。スキンを使用可能な各プレーヤ コンポーネント要素のためのスキンの画像（.png）ファイルと Photoshop テンプレート（.psd）ファイルをまとめた .zip ファイルをダウンロードできます。

VideoPlayer

この例では、シングル Video Player テンプレートを使用しています。

Deluxe	Flat	Minimal
playerChrome-skin video-skin buttons-skin menuButton-skin playhead-skin playheadWell-unloadedSkin playheadWell-bufferedSkin playheadWell-watchedSkin	playerChrome-skin video-skin buttons-skin menuButton-skin playhead-skin playheadWell-unloadedSkin playheadWell-bufferedSkin playheadWell-watchedSkin	video-skin menuButton-skin playhead-skin playheadWell-unloadedSkin playheadWell-bufferedSkin playheadWell-watchedSkin

注

• playerChrome-skin は、他のすべてのスキンの背後に表示されます。
• buttons-skin はボタンのアイコンおよびテキストの背後に表示されます。表示されるのは、ボタンの showBack 属性が true に設定されている場合のみです。
• menuButton-skin は、プレーヤの Brightcove ブランディングがオフになっている場合にのみ表示されます。
• playhead-skin は、プレイヘッドのスクラブ バーのスキンです。プレイヘッドの上に表示されます。
• playheadWell-unloadedSkin は、プレイヘッドの一部で、プログレッシブ ダウンロード動画のバッファされてない部分に相当するスキンです。
• playheadWell-bufferedSkin は、プレイヘッドの一部で、プログレッシブ ダウンロード動画のバッファ済み部分か、ストリーミング動画の未視聴部分全体に相当するスキンです。
• playheadWell-watchedSkin は、プレイヘッドの一部で、視聴済み部分に相当するスキンです。

List

この例では、Compact Tabbed Navigation テンプレートを使用しています。

Deluxe	Flat	Minimal
buttons-skin thumbnail-skin thumbnail-overlaySkin listItemBoxes-skin list-skin scrollbar-buttonSkin scrollbar-backSkin scrollbar-sliderSkin	buttons-skin thumbnail-skin thumbnail-overlaySkin listItemBoxes-skin list-skin scrollbar-buttonSkin scrollbar-backSkin scrollbar-sliderSkin	thumbnail-skin thumbnail-overlaySkin scrollbar-backSkin scrollbar-sliderSkin

注

• thumbnail-overlaySkin は、リストにあるすべてのサムネイルの上に表示されます。スキンが透明でなければ、背後のサムネイルは見えなくなります。
• thumbnail-skin はアイテムのサムネイルの背後に表示されるため、見えるのは、リスト上のアイテムにサムネイルが割り当てられていない場合のみです。
• scrollbar-buttonSkin は、スクロールバー ボタンのアイコンの背後に表示されます。

TileList

この例では、Widescreen with Horizontal List テンプレートを使用しています。

Deluxe	Flat	Minimal
buttons-skin thumbnail-skin thumbnail-overlaySkin pagingButtons-skin pagingButtons-backSkin listItemBoxes-skin	buttons-skin thumbnail-skin thumbnail-overlaySkin pagingButtons-skin pagingButtons-backSkin listItemBoxes-skin	thumbnail-skin thumbnail-overlaySkin pagingButtons-backSkin

注

• listItemBoxes-skin は、TileList の showBack 属性が false に設定されていると表示されません。
• thumbnail-overlaySkin は、リストにあるすべてのサムネイルの上に表示されます。スキンが透明でなければ、背後のサムネイルは見えなくなります。
• thumbnail-skin はアイテムのサムネイルの背後に表示されるため、見えるのは、リスト上のアイテムにサムネイルが割り当てられていない場合のみです。
• pagingButtons-backSkin は、ページング ボタンにマウス ポインタを重ねたときにのみ表示されます。

TabBar

この例では、Compact Tabbed Navigation テンプレートを使用しています。

Deluxe	Flat	Minimal
tabs-skin dropDownMenu-backSkin dropDownMenu-itemSkin dropDownMenu-upButtonSkin dropDownMenu-downButtonSkin	tabs-skin dropDownMenu-backSkin dropDownMenu-itemSkin dropDownMenu-upButtonSkin dropDownMenu-downButtonSkin	dropDownMenu-backSkin dropDownMenu-itemSkin dropDownMenu-upButtonSkin dropDownMenu-downButtonSkin

注

• tabs-skin は、タブのテキストとアイコンの背後に表示されます。
• dropDownMenu-upButtonSkin は、上ボタンのアイコンの背後に表示されます。
• dropDownMenu-downButtonSkin は、下ボタンのアイコンの背後に表示されます。
• dropDownMenu-backSkin は、他のすべてのスキンの背後に表示されます。

ComboBox

この例では、Widescreen with Dropdown Navigation テンプレートを使用しています。

Deluxe	Flat	Minimal
button-skin button-iconSkin item-skin item-firstItemSkin item-lastItemSkin item-firstItemScrolledSkin item-lastItemScrolledSkin background-skin background-upSkin scrollbar-sliderSkin scrollbar-backSkin scrollbar-backUpSkin	button-skin button-iconSkin item-skin item-firstItemSkin item-lastItemSkin item-firstItemScrolledSkin item-lastItemScrolledSkin background-skin background-upSkin scrollbar-sliderSkin scrollbar-backSkin	button-skin button-iconSkin background-skin scrollbar-sliderSkin

注

• item-firstItemSkin は、リストが上に展開されたときに、ドロップダウンの 1 番上のアイテムに適用されます。
• item-lastItemSkin は、リストが下に展開されたときに、ドロップダウンの 1 番下のアイテムに適用されます。
• item-firstItemScrolledSkin は、リストが上に展開され、スクローラが表示されているときに、ドロップダウンの 1 番上のアイテムに適用されます。
• item-lastItemScrolledSkin は、リストが下に展開され、スクローラが表示されているときに、ドロップダウンの 1 番下のアイテムに適用されます。
• background-upSkin は、リストが上に展開されたときに、ドロップダウンの背景に適用されます。
• scrollbar-backUpSkin は、リストが上に展開されたときに、スクロールバーの背景に適用されます。

MediaControls

この例では、シングル Video Player テンプレートを使用しています。

Deluxe	Flat	Minimal
chrome-skin buttons-skin playhead-skin playheadWell-unloadedSkin playheadWell-bufferedSkin playheadWell-watchedSkin volumeControl-sliderBackSkin volumeControl-buttonSkin volumeControl-sliderSkin volumeControl-trackEmptySkin volumeControl-trackFilledSkin	chrome-skin buttons-skin playhead-skin playheadWell-unloadedSkin playheadWell-bufferedSkin playheadWell-watchedSkin volumeControl-sliderBackSkin volumeControl-buttonSkin volumeControl-sliderSkin volumeControl-trackEmptySkin volumeControl-trackFilledSkin	buttons-skin playhead-skin playheadWell-unloadedSkin playheadWell-bufferedSkin playheadWell-watchedSkin volumeControl-sliderBackSkin volumeControl-buttonSkin volumeControl-sliderSkin volumeControl-trackEmptySkin volumeControl-trackFilledSkin

注

• chrome-skin は、他のすべてのスキンの背後に表示されます。
• buttons-skin はボタンのアイコンおよびテキストの背後に表示されます。表示されるのは、ボタンの showBack 属性が true に設定されている場合のみです。
• playhead-skin は、プレイヘッドのスクラブ バーのスキンです。プレイヘッドの上に表示されます。
• playheadWell-unloadedSkin は、プレイヘッドの一部で、プログレッシブ ダウンロード動画のバッファされてない部分に相当するスキンです。
• playheadWell-bufferedSkin は、プレイヘッドの一部で、プログレッシブ ダウンロード動画のバッファ済み部分か、ストリーミング動画の未視聴部分全体に相当するスキンです。
• playheadWell-watchedSkin は、プレイヘッドの一部で、視聴済み部分に相当するスキンです。
• volumeControl の各種スキン、videoPlayer やフルスクリーンのボリューム コントロールには効果がありません。
• volumeControl-buttonSkin は、ボタンのアイコンの背後に表示されます。

TextRegion

Deluxe	Flat	Minimal
background-skin	background-skin	なし