Custom player templates are available only for Brightcove Pro and Enterprise customers. If you are interested in upgrading your Brightcove account, please contact Brightcove for more information.
The Layout element in a player template contains all the inclusion and positioning of UI elements in a player. It contains two broad types of child elements: layout boxes and components. Layout boxes are containers for other elements, which can be either additional layout boxes or components, and define how the child elements are laid out and sized. In general, layout boxes are non-rendering, although you can assign a background color or background image to a layout box that will be rendered behind all of its child elements. Components are the UI elements themselves, like VideoPlayer, Label and Image. For more information about components, see Components in Player Templates. The Layout element is both a container and a layout box itself, as it needs to define how to lay out all of its child elements.
The BEML DTD defines the following layout box elements:
Canvas is the simplest of the layout boxes. Child elements in a Canvas are positioned absolutely within the canvas box at the (x, y) position specified in the child element. Any layout box or component can be a child element of a Canvas layout box. For example:
<Canvas width="300" height="50" style="background-color:#BA4973"> <Label text="My Player" x="10" y="20" /> </Canvas>
The HBox is a horizontal box that lays out all its child elements horizontally. Child elements in an HBox are positioned sequentially from left to right, with each child element being placed directly to the right of the preceding child element, with an optional gutter between. Any layout box or component can be a child element of an HBox layout box. For example:
<HBox width="300" height="50" style="background-color:#BA4973"> <Label text="one" /> <Label text="two" /> <Label text="three" /> </HBox>
The VBox (vertical box) lays out all child elements vertically. Child elements in a VBox are positioned sequentially from top to bottom, with each child element being placed directly below the preceding child element, with any specified pixel gutter between. Any layout box or component can be a child element of a VBox layout box. For example:
<VBox width="50" height="300" style="background-color:#BA4973"> <Label text="one" /> <Label text="two" /> <Label text="three" /> </VBox>
The Grid layout box allows for a more complex layout, with child elements laid out in columns and rows. The following example uses nested layout boxes to show the coloring of individual cells as laid out in a 2x2 grid. Only Rows and Columns elements can be child elements of a Grid layout box. For example:
<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>
The Rows element can be used only within a Grid layout box. A Rows element is used to contain the individual Row elements; only Row elements can be child elements of a Rows element. Its only attribute is gutter, allowing the setting of the pixel space between each row. For example:
<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>
The Row element can be used only within a Rows element, which in turn can be used only within a Grid layout box. A Row element acts very much like an HBox, laying out child items horizontally according to the width of the columns as specified in the Grid's Columns element. The number of child elements must correspond to the number of columns in the Grid. Any layout box or component can be a child element of a Row element. For example:
<Row style="background-color:#FF"> <HBox style="background-color:#FF0000"/> <HBox style="background-color:#00FF00"/> </Row>
The Columns element can be used only within a Grid layout box. It is used to contain the individual Column elements. Its only attribute is gutter, allowing the setting of the pixel space between each column. Its only child is the Column element. For example:
<Columns gutter="20"> <Column width="100"/> </Columns>
The Column element can only be used within a Columns element, which in turn must be contained within a Grid layout box. Column elements are used to specify how many columns are to appear in a Grid and, optionally, the width of each column. No child elements are actually added to a Column element; instead, the child elements in the Grid are specified within Row elements. For example:
<Column width="100"/>
The TextRegion element is a layout container that enables you to group text components (like labels, links, etc.) and express the group as a more unified component in the Publishing module styling mode. For example:
<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>
The MediaControls element is a layout container that contains other BEML layout elements and components, including a Playhead and ToggleButtons. The Playhead and ToggleButton components function only if they are contained, directly or indirectly, by a MediaControls element. For more information and examples, see Media control components.
Learn more about the elements that make up a player template: