Using BEML to Create a Related Video Playlist

Generating an Instant "Playlist" from Related Videos Using BEML

If you use BEML, you know that you typically give your List or TileList components the id "videoList". This id is used by Brightcove Studio and by the BEML processor built into players to allow you to assign playlists to the player. But you're not limited to using the list components in this way. Here I'm going to show you how to include a list in single-video player that will automatically pickup and display the related videos for the current video through the magic of BEML data binding. Here's the player I built:



You'll notice that when a video finishes, or you select a new video from the list, the list refreshes -- that's because it's not representing a playlist from my account, but rather the related videos for the video that is currently loaded in the player.

Here's how it's done. I started with a copy of the Chromeless Player with Tabbed Playlists template. I removed the TabBar component. and then made two changes to the List component:

  • Changed the id to an arbitrary value so that Studio would not identify this a playlist player
  • Changed the data binding by changing the value of the data attribute to point to the relatedMedia property of the current video
<List id="relatedVideoList" width="300" rowHeight="78"
 	automaticAdvance="true" data="{videoPlayer.relatedMedia}" 
	selectOnClick="true" noInitialSelection="true" itemInsetV="4" itemLeading="2">

Next, I changed the data binding of the video attribute for the ChromelessVideoPlayer component to reflect the new id value for the List:

<ChromelessVideoPlayer id="videoPlayer" 

And that's all it takes. Of course, you could keep the TabBar and the regulare assigned playlists, and add this related video pseudo playlist as an additional list, but that would require a little Player API development.