Custom player templates are available only for Brightcove Pro or Enterprise customers. If you are interested in upgrading your Brightcove account, please contact Brightcove for more information.
The VideoPlayer component includes a set of standard Brightcove media controls including a play/pause toggle, a timeline scrubber, volume controls, maximize/minimize controls and a menu access button. BEML also includes a set of media control components enable you to create custom media control components. This topic shows several player template examples that demonstrate how to use these components:
Note how these examples use the adContext id to reference the AdvertisingContext component. This allows MediaControls to work with advertising in the player by default. You must set up your Media Controls player template in this manner if you want to deliver ads in a player built from this template. If you don't include the appropriate adContext parameters shown below, ads will not work in players built from your template. If you are not sure if you will use advertising, we recommend you start with this template any way, since players will work whether or not you have advertising enabled for the player.
The following example shows a complete custom player template that employs the MediaControls BEML element and fully supports advertising delivery. This is the basic VideoPlayer template, but with the VideoPlayer component being replaced by VideoDisplay and MediaControls.
<Runtime>
<Theme name="Deluxe" style="Light" />
<Layout boxType="vbox" padding="3" width="486" height="412">
<VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
<MediaControls id="mediaControls" height="46">
<HBox width="460" height="12" x="10" y="5" gutter="21">
<Label visible="{adContext.playheadVisible}" width="31" height="11"
vAlign="middle" hAlign="right"
text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" />
<VBox>
<Spacer height="1" />
<Playhead visible="{adContext.playheadVisible}" mediaController="{videoPlayer}" />
</VBox>
<Label visible="{adContext.playheadVisible}" width="31" height="11"
vAlign="middle"
text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" />
</HBox>
<HBox width="465" height="19" x="5" y="25" gutter="10">
<ToggleButton visible="{adContext.playPauseVisible}" width="60" showBack="false"
iconName="play" toggledIconName="pause"
label="controls play" toggledLabel="controls pause"
tooltip="controls play tooltip" toggledTooltip="controls pause tooltip"
height="19" autoSize="false" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20"
click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}"
toggled="{videoPlayer.playing}"/>
<Spacer />
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="share"
label="community share" tooltip="community share tooltip"
height="19" autoSize="true" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="21"
data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Email', data)}"/>
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="link"
label="community link" tooltip="community link tooltip"
height="19" autoSize="true" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="21"
data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Link', data)}"/>
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="code"
label="community code" tooltip="community code tooltip"
height="19" autoSize="true" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="21"
data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Embed', data)}"/>
<Spacer />
<Button visible="{adContext.maximizeVisible}" showBack="false"
iconName="maximize" tooltip="controls maximize tooltip"
width="19" height="17" click="{videoPlayer.goFullScreen()}"/>
<Button visible="{adContext.volumeVisible}" showBack="false"
iconName="volume" tooltip="controls volume tooltip"
width="19" height="17" click="{videoPlayer.toggleVolumeControls()}"/>
<Button visible="{adContext.menuVisible}" showBack="false"
iconName="menu" label="controls menu" height="19" autoSize="true"
lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="19"
data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Info', data)}"/>
</HBox>
<Label visible="{adContext.sponsorMessageVisible}" x="9" y="5" text="sponsor message"/>
<Label visible="{adContext.timePositionVisible}" x="439" y="5" width="31" height="11"
vAlign="middle" hAlign="right"
text="{format(videoPlayer.positiveTimeRemaining, SecondsTimecodeFormatter)}" />
</MediaControls>
</Layout>
</Runtime>
This is the basic VideoPlayer template, but with the VideoPlayer component being replaced by VideoDisplay and MediaControls. It also uses the VolumeControl component instead of the built-in volume slider.
<Runtime>
<Theme name="Deluxe" style="Light" />
<Layout boxType="vbox" padding="3" width="486" height="412">
<VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
<MediaControls id="mediaControls" height="46">
<HBox width="460" height="12" x="10" y="5" gutter="21">
<Label visible="{adContext.playheadVisible}" width="31" height="11"
vAlign="middle" hAlign="right"
text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" />
<VBox>
<Spacer height="1" />
<Playhead visible="{adContext.playheadVisible}" mediaController="{videoPlayer}" />
</VBox>
<Label visible="{adContext.playheadVisible}" width="31" height="11" vAlign="middle"
text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" />
</HBox>
<HBox width="465" height="19" x="5" y="25" gutter="10">
<ToggleButton visible="{adContext.playPauseVisible}" width="60" showBack="false"
iconName="play" toggledIconName="pause"
label="controls play" toggledLabel="controls pause"
tooltip="controls play tooltip" toggledTooltip="controls pause tooltip"
height="19" autoSize="false" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20"
click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}"
toggled="{videoPlayer.playing}"/>
<Spacer />
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="share"
label="community share" tooltip="community share tooltip" height="19"
autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left"
labelOffsetX="21" data="{videoPlayer.video}"
click="{videoPlayer.toggleMenuPage('Email', data)}"/>
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="link"
label="community link" tooltip="community link tooltip" height="19"
autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left"
labelOffsetX="21" data="{videoPlayer.video}"
click="{videoPlayer.toggleMenuPage('Link', data)}"/>
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="code"
label="community code" tooltip="community code tooltip" height="19"
autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left"
labelOffsetX="21" data="{videoPlayer.video}"
click="{videoPlayer.toggleMenuPage('Embed', data)}"/>
<Spacer />
<Button visible="{adContext.maximizeVisible}" showBack="false" iconName="maximize"
tooltip="controls maximize tooltip" width="19" height="17"
click="{videoPlayer.goFullScreen()}"/>
<VolumeControl id="volumeButton" visible="{adContext.volumeVisible}" showBack="false"
iconName="volume" mutedIconName="muted"
tooltip="mute tooltip" mutedTooltip="unmute tooltip"
width="22" height="17" mediaController="{videoPlayer}"/>
<Button visible="{adContext.menuVisible}" showBack="false" iconName="menu"
label="controls menu" height="19" autoSize="true" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="19"
data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Info', data)}"/>
</HBox>
<Label visible="{adContext.sponsorMessageVisible}" x="9" y="5" text="sponsor message"/>
<Label visible="{adContext.timePositionVisible}" x="439" y="5" width="31" height="11"
vAlign="middle" hAlign="right"
text="{format(videoPlayer.positiveTimeRemaining, SecondsTimecodeFormatter)}" />
</MediaControls>
</Layout>
</Runtime>
This is the basic VideoPlayer template, but with the VideoPlayer component being replaced by VideoDisplay and MediaControls. It also uses a ToggleButton for mute instead of a volume slider.
<Runtime>
<Theme name="Deluxe" style="Light" />
<Layout boxType="vbox" padding="3" width="486" height="412">
<VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
<MediaControls id="mediaControls" height="46">
<HBox width="460" height="12" x="10" y="5" gutter="21">
<Label visible="{adContext.playheadVisible}" width="31" height="11"
vAlign="middle" hAlign="right"
text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" />
<VBox>
<Spacer height="1" />
<Playhead visible="{adContext.playheadVisible}" mediaController="{videoPlayer}" />
</VBox>
<Label visible="{adContext.playheadVisible}" width="31" height="11"
vAlign="middle"
text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" />
</HBox>
<HBox width="465" height="19" x="5" y="25" gutter="10">
<ToggleButton visible="{adContext.playPauseVisible}" width="60" showBack="false"
iconName="play" toggledIconName="pause"
label="controls play" toggledLabel="controls pause"
tooltip="controls play tooltip" toggledTooltip="controls pause tooltip"
height="19" autoSize="false" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20"
click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}"
toggled="{videoPlayer.playing}"/>
<Spacer />
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="share"
label="community share" tooltip="community share tooltip" height="19"
autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left"
labelOffsetX="21" data="{videoPlayer.video}"
click="{videoPlayer.toggleMenuPage('Email', data)}"/>
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="link"
label="community link" tooltip="community link tooltip" height="19"
autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left"
labelOffsetX="21" data="{videoPlayer.video}"
click="{videoPlayer.toggleMenuPage('Link', data)}"/>
<Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="code"
label="community code" tooltip="community code tooltip" height="19"
autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left"
labelOffsetX="21" data="{videoPlayer.video}"
click="{videoPlayer.toggleMenuPage('Embed', data)}"/>
<Spacer />
<Button visible="{adContext.maximizeVisible}" showBack="false" iconName="maximize"
tooltip="controls maximize tooltip" width="19" height="17"
click="{videoPlayer.goFullScreen()}"/>
<ToggleButton visible="{adContext.volumeVisible}" showBack="false" iconName="volume"
toggledIconName="muted" toggledTooltip="Unmute" tooltip="Mute"
width="19" height="17" click="{videoPlayer.mute(true)}"
toggledClick="{videoPlayer.mute(false)}" toggled="{videoPlayer.muted}"/>
<Button visible="{adContext.menuVisible}" showBack="false" iconName="menu"
label="controls menu" height="19" autoSize="true" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="19"
data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Info', data)}"/>
</HBox>
<Label visible="{adContext.sponsorMessageVisible}" x="9" y="5" text="sponsor message"/>
<Label visible="{adContext.timePositionVisible}" x="439" y="5" width="31" height="11"
vAlign="middle" hAlign="right"
text="{format(videoPlayer.positiveTimeRemaining, SecondsTimecodeFormatter)}" />
</MediaControls>
</Layout>
</Runtime>