Data Binding in Player Templates

Custom player templates are available only for Video Cloud Pro and Enterprise customers. If you are interested in upgrading your Video Cloud account, please contact Brightcove for more information.

In a player template, you can use a simple binding to set the values of attributes, using the ID and properties of another object. The simple binding syntax looks like this:

<Element attribute="{component.object.property}" />

You can use the ! negation operator to bind to the inverse of a Boolean property. For example, this specifies that the component should be included in the layout if the video player is not in fullscreen mode:

includeInLayout="{!videoPlayer.fullscreen}"

The following table describes, for content-containing components, the objects that are available, together with all of their sub-properties:

To enable content assignment to these components and to enable other components to access these objects, the component must have a specific value for its id attribute:

• VideoPlayer, ChromelessVideoPlayer, and VideoDisplay. The id attribute of this component must always be "videoPlayer" to provide access to the currently-selected video.
• List and TileList. The id attribute of these components must always be "videoList" to provide access to the currently-selected playlist and its videos.
• TabBar. The id attribute of this component must always be "playlistTabs" to provide access to the playlists assigned to the player.
• ComboBox. The id attribute of a ComboBox determines whether the ComboBox displays a list of playlists, or a list of videos in a single playlist. To display a list of playlists, use id="playlistCombo"; to display a list of the videos in a single playlist, use id="videoCombo".

You do not need to assign a data attribute to these components. Their data is assigned automatically through the id.

Note that the id attribute of any component in a template must be a unique value and that a player template can have only one instance of each of these components that uses these id attribute values: only a single VideoPlayer, ChromelessVideoPlayer, or VideoDisplay component can have id="videoPlayer"; only a single List or TileList component can have id="videoList"; and only a single TabBar component can have id="playlistTabs".

Data binding examples

These simple bindings enable components to refer dynamically to important metadata relating to the playlists and videos loaded into the player. Let's look at an example in detail. This is a simple TitleLabel tag that can be found in many templates:

<TitleLabel  width="160" height="40" 
    text="{videoPlayer.video.displayName}" />

Here, the text attribute of the label is videoPlayer.video.displayName. It is usually easiest to understand the data binding if you read it backwards. So, in this example, we are setting the text value to be the 'displayName' of the 'selectedItem' in the 'videoPlayer'.

Where does the player get each of these values?

• videoPlayer. This is the VideoPlayer component. The reason we use the syntax videoPlayer is because this is actually the id attribute set in the BEML for the VideoPlayer component.
• video. This is the currently-selected object bound to the component with id="videoPlayer". With different components, you are able to load different objects. The object loads in the Video DTO or the Playlist DTO for the component specified, which enables you to get at the properties of the object.
• displayName. This is the specific property of the video object. Once the Video DTO is loaded into the VideoPlayer component, we find this property of the Video and bind it to the TitleLabel in the BEML code.

The DTOs used in BEML are the Flash-only Player API DTOs. You can see the properties of each of these DTOs in the Flash-only Player API Reference.

A ListItem element in a player template can refer to two special values: index and currentItem. The value of index is the integer index in the list of each particular ListItem. The value of currentItem is the data at the index of the List element's dataProvider for each ListItem. For instance, if a List is passed the VideoDTOs from a playlist, each ListItem and all of its subelements can reference its particular VideoDTO through the currentItem value. For example, you can display the thumbnail image of the video that corresponds to the ListItem's position in the list:

<List id="videoList" rowHeight="60" >
  <ListItem id="videoItem" boxType="hbox" padding="5" gutter="10">
    <Image width="67" height="50" 
           source="{currentItem.thumbnailURL}" />
  </ListItem>
</List>

A ListItem can also use special global functions that enable components in a ListItem to make function calls that do such things as play a video or display the "Get Link" menu. For more information, see Calling Functions from ListItems.