Player Template Examples

Product
Video Cloud
Applies to Roles
Developer
Version
Brightcove 5
Modules
BEML
Edition
Pro, Enterprise
Created by Eric Johnson.

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 this topic, we'll look at some examples of player templates and examine how you can use BEML to customize new player templates or create totally new ones. The example player templates are:

You can download the BEML for each of the standard player templates as a .zip file.

Single video player

First, let's look at one of the standard Video Cloud player templates, the Video Player 3.0. This is a simple single-video player. Here is the BEML that defines this player template:

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

The Theme element sets the theme to Deluxe and the style to Light. The Layout element contains a single layout box, a VBox, which in turn contains a single component, a VideoPlayer. The VideoPlayer component consists of a video window and a set of standard Video Cloud media controls. That's all it takes to define a simple player.

Localized player

Now, let's take the simple player we defined and see how easy it is to change the labels on the controls. Suppose you want your play button to say "Go!" instead of "Play." You can add this line to override the text of the play button:

<label key="controls play">Go!</label>

Add this line in a Labels element; your player template would look like this:

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Labels>     <label key="controls play">Go!</label>   </Labels> 
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

Now, instead of a peppier play button, suppose you want your player controls to be in another language, like French. In your Labels element, you simply point to the URL of a label set file that specifies the French text for each of the player's labels:

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Labels file="http://admin.brightcove.com/bc3_examples/fr_player_labels.xml" /> 
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

Of course, you can easily set the labels to French, German, Italian, Japanese, or Spanish, using the Language Options tab in the Edit Settings dialog of the Publishing module. But this example shows how you could localize a player for almost any language.

Compact Tabbed Navigation 3.0 player

The next example looks at a more complex player template, the Compact Tabbed Navigation 3.0 player. This player allows the viewer to toggle though multiple playlists by selecting tabs at the top of the playlist area. The scrollable list on the right includes the short description and thumbnails for each video. Note the following elements that are added to the player template:

  1. An HBox that holds an Image and a TabBar. The TabBar displays the playlist tabs: 
    <HBox height='40' vAlign='bottom' gutter='9'>
  <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' />
  <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' />
</HBox>
  2. An HBox that holds the VideoPlayer and a List. The VideoPlayer plays the selected item from the playlist. The List displays the items on the playlist: 
    <HBox height='406' gutter='6'>
  <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' />
  <List id='videoList' rowHeight='78' automaticAdvance='true'
           data='{playlistTabs.selectedItem.videoDTOs}'
           selectOnClick='true' itemInsetV='4' itemLeading='2'>
    <ListItem boxType='hbox'>
          ...
    </ListItem>
  </List>
</HBox>
  3. Each ListItem contains two VBoxes: one to display a ThumbnailButton with the thumnail image for a video in the playlist, and one to display the name and short description for the video: 
    <List id='videoList' rowHeight='78' automaticAdvance='true'
           data='{playlistTabs.selectedItem.videoDTOs}'
           selectOnClick='true' itemInsetV='4' itemLeading='2'>
  <ListItem boxType='hbox'>
      <Spacer width='8' />
      <VBox width='80' height='74' vAlign='middle'>
          <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' />
      </VBox>
      <Spacer width='7' />
      <VBox>
        <Spacer height='3' />
        <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' />
        <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' />
      </VBox>
      <Spacer width='3' />
    </ListItem>
  </ListItem>
</List>
  4. The final element in the Layout is a VBox that contains two HBoxes. The first HBox displays a TitleLabel with the name of the video currently loaded into the VideoPlayer and a Link with a URL assigned to the video: 
    <VBox gutter='15'>
  <HBox height='32'>
    <Spacer width='6' />
    <VBox>
      <TitleLabel height='24' width='765' text='{videoPlayer.video.displayName}' 
        selected='true' size='18' truncate='true' />
      <Canvas>
        <Link x='1' y='-5' size='10' text='{videoPlayer.video.linkText}' 
                 vAlign='bottom' url='{videoPlayer.video.linkURL}' />
      </Canvas>
    </VBox>
  </HBox>
  ...
</VBox>
  5. The second HBox displays an Image and an ExpandingBanner. Note that in this template, neither the Image nor the ExpandingBanner have any content assigned to them yet: 
    <VBox gutter='15'>
    ...
  <HBox width='757' hAlign='right'>
    <Canvas width='728'>
      <Image id='bottomImage' width='728' height='90' scaleMode='scaleDown' />
      <ExpandingBanner id='banner' expandedHeight='405' 
                          width='728' height='90' expandedWidth='299' buttonWidth='90'
                          expandedOffsetY='-52' expandedOffsetX='458'
                          disableOnExpand='playlistTabs,videoList' />
    </Canvas>
  </HBox>
</VBox>

Here is the complete player template for the Compact Tabbed Navigation 3.0 player:

 
<Runtime>
 
  <Theme name='Deluxe' style='Light'>
    <Style id='default'>
      <![CDATA[.titleText {size: 12;}.bodyText {size: 10;}.linkText {size: 10;}]]>
    </Style>
  </Theme>
  
  <Layout id='application' width='798' height='603' boxType='vbox' padding='6' gutter='4'>
    <HBox height='40' vAlign='bottom' gutter='9'>
      <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' />
      <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' />
    </HBox>
 
    <HBox height='406' gutter='6'>
      <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' />
      <List id='videoList' rowHeight='78' automaticAdvance='true'
               data='{playlistTabs.selectedItem.videoDTOs}'
               selectOnClick='true' itemInsetV='4' itemLeading='2'>
        <ListItem boxType='hbox'>
          <Spacer width='8' />
          <VBox width='80' height='74' vAlign='middle'>
            <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' />
          </VBox>
          <Spacer width='7' />
          <VBox>
            <Spacer height='3' />
            <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' />
            <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' />
          </VBox>
          <Spacer width='3' />
        </ListItem>
      </List>
  </HBox>
  <VBox gutter='15'>
    <HBox height='32'>
      <Spacer width='6' />
      <VBox>
        <TitleLabel height='24' width='765' text='{videoPlayer.video.displayName}'
           selected='true' size='18' truncate='true' />
        <Canvas>
          <Link x='1' y='-5' size='10' text='{videoPlayer.video.linkText}' 
                   vAlign='bottom' url='{videoPlayer.video.linkURL}' />
        </Canvas>
      </VBox>
    </HBox>
    <HBox width='757' hAlign='right'>
      <Canvas width='728'>
        <Image id='bottomImage' width='728' height='90' scaleMode='scaleDown' />
        <ExpandingBanner id='banner' expandedHeight='405' 
                            width='728' height='90' expandedWidth='299' buttonWidth='90'
                            expandedOffsetY='-52' expandedOffsetX='458'
                            disableOnExpand='playlistTabs,videoList' />
      </Canvas>
    </HBox>
  </VBox>
  </Layout>
</Runtime>
Tags
sample