Brightcove Integration

From Livestream » User Guide

A plugin is available for Brightcove users if they want to playback content of their Livestream channel using the Brightcove player. Please note that a Livestream account is required, you may signup here if you don't already have one.

The integration consists of a BEML template that loads a custom swf component that in turn loads the content of your Livestream channel.

The name of the channel is gathered by the component from a Javascript function in the HTML page where the player is embedded.

Step one: Create the template

The first step is to create a new template in the publishing section of the Brightcove studio.

Here is the code for the template:

<Runtime>
  <Theme name="Deluxe" style="Light"/>
  <Layout>
    <SWFLoader id="loader" width="500" height="380" 
	source="http://cdn.livestream.com/chromelessPlayer/wrappers/BrightcovePlayer.swf"/>
    <MediaControls x="0" y="380" id="mediaControls" height="34">
      <HBox width="485" height="19" x="5" y="13" gutter="10">
        <ToggleButton id="playButton" showBack="false" iconName="play" toggledIconName="pause" 
		label="controls play" toggledLabel="controls pause" tooltip="controls play tooltip" 
		toggledTooltip="controls pause tooltip" height="19" autoSize="true" 
		lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20" 
		toggled="false" click="{loader.callSWFMethod('togglePlay')}"/>
        <Spacer/>
        <Button id="maximizeButton" showBack="false" iconName="maximize" 
		tooltip="controls maximize tooltip" width="19" height="17" 
		click="{loader.callSWFMethod('toggleFullscreen')}"/>
        <ToggleButton id="volumeButton" showBack="false" iconName="volume" 
		tooltip="mute tooltip" width="19" height="17" toggledIconName="muted" 
		click="{loader.callSWFMethod('toggleMute')}"/>
      </HBox>
    </MediaControls>
  </Layout>
</Runtime>

This example is a 4:9 aspect ratio player that has dimensions of 500x414.

You may customize the size of the player at this point. If you do, keep in mind you have to update the size in several places:

• The size of the template in the 'Edit Template' dialog of the Brightcove studio (this will be the final size of the player)
• The size of the SWFLoader tag in the template. It will have the same width as the total size of the player, but will be less tall to account for the MediaControls at the bottom. Since those are 34px in height, the SWFLoader's height will be 34px less than the total height of the player.
• If you changed the height, you'll need to update the 'y' attribute of the MediaControls tag. This should be set to the height of the SWFLoader.
• If you changed the width, update the width of the HBox in the MediaControls. This should be set to 15px less than the total width of the player

Some options are available as flashvars to the BrightcovePlayer swf file. You can specify those in the template at the end of the source attribute of the SWFLoader tag.

• autoPlay: set this to 'true' if you want the player to start playback automatically
• channel: this is an alternate way to set the name of the channel to tune-in to. This might be useful if you don't have access to javascript on the page where the player is embedded.

Step two: Create the player

The next step is to create a new player and assign it the new template. This is pretty straightforward, the only customization that is necessary is enabling the ActionScript / JavaScript API in the 'Edit Settings' dialog of the Brightcove studio for that player.

Step three: Embedding into HTML

The 'Get Code' button in the Players page of the Brightcove studio will allow you to get the code required to embed this player into a HTML page.

This code has to be customized in two ways:

• The bgcolor parameter has to be set to #000000 (black). This affects the background color behind the video in fullscreen mode.
• A parameter 'isVid' has to be added with a value of 'true'. This allows Brightcove's MediaControls to show up independently of the Brightcove video player which is missing from that template.

The following is an example of what the resulting code for JavaScript looks like. Keep in mind you have to customize your own tag for this, since the 'playerID' and 'publisherID' parameters are specific to your account.

<!-- Start of Brightcove Player -->
 
<div style="display:none">
 
</div>
 
<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C 
found at http://corp.brightcove.com/legal/terms_publisher.cfm. 
-->
 
<script language="JavaScript" type="text/javascript" 
	src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
 
<object id="myExperience" class="BrightcoveExperience">
  <param name="bgcolor" value="#000000" />
  <param name="width" value="500" />
  <param name="height" value="414" />
  <param name="playerID" value="{insert your playerID here}" />
  <param name="publisherID" value="{insert your publisher here}"/>
  <param name="isUI" value="true" />
  <param name="isVid" value="true" />  
</object>
 
<!-- End of Brightcove Player -->

Step four: Specify the channel

The final step is to add JavaScript code to the page that will tell the player which channel to load up. The player looks for a function named 'getChannelID()' that returns a string containing the channel name. Here is an example of such a function:

<script type="text/javascript">
	function getChannelID() {
		return "livestreamapi43";
	}
</script>

You can add this code to the HEAD section of your HTML Page.

As an alternative, if Javascript is not available to you, you may specify a parameter to BrightcovePlayer.swf name 'channel'. You will need to make the change in the Brightcove studio by hardcoding the channel into the template. The swfloader tag of the template would look like this:

<SWFLoader id="loader" width="500" height="380" 
	source="http://cdn.livestream.com/chromelessPlayer/wrappers
		/BrightcovePlayer.swf?channel=169demochannel"/>

This is what a complete example of the integration looks like.