カムタム プレーヤ テンプレートは、Brightcove Pro エディションおよび Enterprise エディションをご利用の方にのみ利用できます。 Brightcove アカウントのアップグレードについては、Brightcove にお問い合わせください。
プレーヤ テンプレートの Layout 要素には、プレーヤに含まれるすべての UI 要素と、その位置情報があります。大きく分けて、2 種類の子要素があります。レイアウト ボックスとコンポーネントです。レイアウト ボックスは他の要素のコンテナで、別のレイアウト ボックスやコンポーネントを含めることができ、子要素の配置とサイズを定義できます。一般には、レイアウト ボックスはレンダリングされません。背景色や背景画像をレイアウト ボックスに割り当てても、すべての子要素の後ろにレンダリングされるからです。コンポーネントとは UI 要素自体のことで、VideoPlayer、Label、Image などがあります。コンポーネントについて詳細は、プレーヤ テンプレートのコンポーネントを参照してください。Layout 要素はコンテナでもあり、レイアウト ボックスそのものでもあります。すべての子要素の配置を定義する必要があります。
BEML DTD では、以下のレイアウト ボックス要素が定義されています。
プレーヤ テンプレートの Layout 要素には、プレーヤに含まれるすべての UI 要素と、その位置情報があります。Layout 要素はコンテナでもあり、レイアウト ボックスそのものでもあります。すべての子要素の配置を定義する必要があります。デフォルトは、Canvas として機能します。boxType 属性を使用して、Layout 要素を代わりに VBox または HBox として機能するように指定できます。次に例を示します。
<Layout width="976" height="480" boxType="hbox">
<VBox>
</VBox>
<VBox gutter="16">
</VBox>
</Layout>
Canvas は、もっともシンプルなレイアウト ボックスです。Canvas の子要素は、子要素内で指定された (x, y) をキャンバス ボックス内の絶対位置として配置されます。どのレイアウト ボックスやコンポーネントでも、Canvas レイアウト ボックスの子要素にすることができます。次に例を示します。
<Canvas width="300" height="50" style="background-color:#BA4973"> <Label text="My Player" x="10" y="20" /> </Canvas>
HBox は、すべての子要素を横に並べる水平ボックスです。HBox の子要素は左から右へ順に並べられ、各子要素は前の子要素のすぐ右側に配置されます。間にスペースを設けることもできます。どのレイアウト ボックスやコンポーネントでも、HBox レイアウト ボックスの子要素にすることができます。次に例を示します。
<HBox width="300" height="50" style="background-color:#BA4973"> <Label text="one" /> <Label text="two" /> <Label text="three" /> </HBox>
VBox は、すべての子要素を縦に並べる、垂直ボックスです。VBox の子要素は上から下へ順に並べられ、各子要素は前の子要素のすぐ下に配置されます。間に、ピクセル数を指定してスペースを設けることもできます。どのレイアウト ボックスやコンポーネントでも、VBox レイアウト ボックスの子要素にすることができます。次に例を示します。
<VBox width="50" height="300" style="background-color:#BA4973"> <Label text="one" /> <Label text="two" /> <Label text="three" /> </VBox>
Grid は、より複雑な配置が可能なレイアウト ボックスで、子要素を列と行で配置します。以下の例ではレイアウト ボックスがネストされており、2x2 のグリッドに配置した各セルの色を示しています。Rows 要素と Columns 要素のみを Grid レイアウト ボックスの子要素にすることができます。次に例を示します。
<Grid padding="20" style="background-color:#999999">
<Columns gutter="20">
<Column width="100"/>
</Columns>
<Rows gutter="20">
<Row style="background-color:#FF">
<HBox style="background-color:#FF0000"/>
<HBox style="background-color:#00FF00"/>
</Row>
<Row style="background-color:#FF00" height="50">
<HBox style="background-color:#FF00FF"/>
<HBox style="background-color:#FFFF00"/>
</Row>
</Rows>
</Grid>
Rows 要素は Grid レイアウト ボックス内でのみ使用できます。各 Row 要素を収納するために、Rows 要素を使用します。Row 要素のみを Rows 要素の子要素にすることができます。唯一の属性は gutter で、各行の間のスペースをピクセルで設定できます。次に例を示します。
<Rows gutter="20">
<Row style="background-color:#FF">
<HBox style="background-color:#FF0000"/>
<HBox style="background-color:#00FF00"/>
</Row>
<Row style="background-color:#FF00" height="50">
<HBox style="background-color:#FF00FF"/>
<HBox style="background-color:#FFFF00"/>
</Row>
</Rows>
Row 要素は Row 要素内のみで使用できます。さらに Row 要素は Grid レイアウトボックス内のみで使用できます。Row 要素は HBox とよく似た働きをします。Grid の Columns 要素で指定した列幅に合わせて、子となるアイテムを水平に配置します。子要素の数は、Grid の列数に対応している必要があります。どのレイアウト ボックスやコンポーネントでも、Row 要素の子要素にすることができます。次に例を示します。
<Row style="background-color:#FF"> <HBox style="background-color:#FF0000"/> <HBox style="background-color:#00FF00"/> </Row>
Columns 要素は Grid レイアウト ボックス内でのみ使用できます。各 Column 要素を収容するために使用します。唯一の属性は gutter で、各列の間のスペースをピクセルで設定できます。子として使用できるのは Column 要素のみです。次に例を示します。
<Columns gutter="20"> <Column width="100"/> </Columns>
Column 要素は Columns 要素内のみで使用できます。さらに Columns 要素は Grid レイアウト ボックス内のみで使用できます。Column 要素は、Grid 内に表示する列数を指定するために使用します。任意で各列の幅も指定できます。Column 要素には実際には子要素は追加されません。その代わり、Grid 要素の子要素は Row 要素で指定されます。次に例を示します。
<Column width="100"/>
TextRegion 要素はレイアウト コンテナです。テキスト コンポーネント（ラベルやリンクなど）をグループ化して、Publishing モジュールのスタイリング モードで、そのグループをまとまりのあるコンポーネントとして表現することができます。次に例を示します。
<TextRegion id="textRegion" height="75" padding="5" boxType="vbox" backgroundColor="#fff000">
<TitleLabel id="videoName" text="{videoPlayer.video.displayName}"
height="17" truncate="true"/>
<Label id="artistName" text="{videoPlayer.video.shortDescription}"
height="15" size="11" truncate="true"/>
<Link id="relatedLink" text="{videoPlayer.video.linkText}"
size="11" height="15" url="{videoPlayer.video.linkURL}"/>
</TextRegion>
ViewStack 要素は、他の BEML レイアウト要素およびコンポーネントを含むレイアウト コンテナです。子要素をすべて積み重ね、スタックの選択されたインデックスに基づいて、一度に 1 つの要素を示します。ViewStack 要素の selectedIndex 属性は、表示される子要素のスタックのインデックスを示します。selectedItemID は、表示される子要素の BEML ID を示します。ViewStack 要素を含むプレーヤ テンプレートの詳細な例を参照してください。
MediaControls 要素および ChromelessControls 要素は、Playhead や ToggleButtons など、他の BEML レイアウト要素およびコンポーネントを含むレイアウト コンテナです。MediaControls 要素は、プレーヤの一部として常に表示されます。一方、ChromelessControls 要素は、動画表示と重なり、視聴者がマウスのポインタを動画表示上に置いた場合に限り表示されます。Playhead コンポーネントおよび ToggleButton コンポーネントが機能するのは、MediaControls 要素または ChromelessControls 要素が直接または間接にそれらを含む場合のみです。詳細および例は、メディア コントロール コンポーネントを参照してください。
プレーヤ テンプレートを構成する要素の詳細については、以下を参照してください。