Data Binding in Player Templates

Applies to Roles
Developer
Version
Brightcove 4
Modules
BEML
Edition
Pro, Enterprise

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.

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="{object.property.property}" />

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

components binding object description
TabBar, List and TileList selectedItem The currently selected item.
ListItem currentItem The data that corresponds to the ListItem's position in its parent list.
VideoPlayer and VideoDisplay video The video currently loaded in the player.
  mediaDuration The length of the video, in seconds.
  mediaPosition The current position of the playhead, in seconds from the beginning.
  timeRemaining The time remaining, in seconds from the end.
  playing Is the video currently playing? A Boolean.

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 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 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. For example, a TitleLabel can display the name of the video currently loaded in the player:

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

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="playlist" 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.

Tags