Player Debugger
Post to MySpace Widget
This example outlines how to create a BEML SWF component that allows a user to embed the Brightcove player into a MySpace blog page. This technique allows you to tap into social networks to help drive additional views of your content. You can read more about "post to my space" functionality, provided by MySpace, here.
Here is what the example component looks like, embedded into a single title video player:
There are two relevant pieces to the implementation:
- A BEML-based SWF Component – A custom SWF component that enables the post to MySpace functionality
- BEML for Brightcove Player Template – The BEML used to construct a custom player template that embeds the SWF component.
BEML-based SWF Component
The component is implemented as an ActionScript 3 SWF. We are integrated with the BEML player runtime by extending the com.brightcove.api.CustomModule class. This allows us to define a single method, named initialize(), that the player runtime calls once our component has been loaded and begins interacting with the player. In this example, we want to get hold of the SocialModule component, which gives us access to a link to the player and the embed code for the player. Both of these will be used to post our video to MySpace. Here is what our initialize() method looks like:
/** * This is the function that is called by the BEMl runtime automatically. Once this * method has been called, we can begin interacting with the player and all the modules. * We care about the SocialModule, so we get access to it and register our listener. */ override protected function initialize():void { _socialModule = player.getModule(APIModules.SOCIAL) as SocialModule; _socialModule.addEventListener(EmbedCodeEvent.EMBED_CODE_RETRIEVED, onEmbedCode); }
In order to extend the CustomModule class, you need to include the Player API SWC as part of your FlexBuilder project. You can download the Player SWC here. Now that we've defined our class and provided a hook into the player runtime the rest of the code is very straight forward. We need to display an image, register ourselves as the listener for the MouseClick event and then initiate the posting to MySpace. The one piece of the code that we will explain is the gathering of the necessary data to post to MySpace. The pieces of information that we want to send to MySpace include:
- Title: The title of post we want sent to our MySpace blog
- Link: The link to the content that we are watching so that our friends could navigate back to see what we videos we are watching
- Content: The embed code for the player. This allows us to embed the Brightcove player directly into our MySpace blog post.
Let's look at each of these pieces in turn and see where we can obtain the information from:
- Title. The title we can hardcode to a value in our ActionScript class. For now, it's set to, "Check out the video I'm watching...". You can modify the source code to change it to something else that you desire.
- Link. The link to the content that we are watching. We are able to access this from the SocialModule's
getLink()method. - Content. To get our embed code, we need to call the
getEmbedCode()method of the SocialModule. This method will return us the embed code asynchronously and fire a EMBED_CODE_RETRIEVED event. This is why we registered ourselves as a listener for this event in theinitialize()method.
Thus, when the user clicks on our component, we need to call the getEmbedCode() method and then, once it is returned to us, we can initiate posting to MySpace. Here is what our methods look like:
/**
* Event handler for when the user clicks on the component. We need to
* send MySpace our embed code, so we need to request it from the social module
* Previously we had registered an 'onEmbedCode' listener for when the
* embed code is returned from the server.
*/
internal function onMouseClick(evt:MouseEvent):void {
if (_socialModule != null) {
_socialModule.getEmbedCode();
}
}
/**
* Listener that is called when our embed code is retrieved from the server. At this
* point we have all our required information to post to my space.
*/
internal function onEmbedCode(evt:EmbedCodeEvent):void {
var linkURL:String = _socialModule.getLink();
var embedCode:String = evt.snippet;
postToMySpace(PTM_TITLE, embedCode, linkURL);
}
/**
* Method that does the actual posting to my space. FP10 supports POST in the navigateToURL
* but to stay backwards compatible we will execute this as an HTTP GET, triggering the opening
* of a new window where the user can sign in.
*/
internal function postToMySpace(title:String, content:String, url:String):void {
var targetURL:String = PTM_URL + 't=' + encodeURIComponent(title) + '&c='
+ encodeURIComponent(content)
+ '&u=' + encodeURIComponent(url);
navigateToURL(new URLRequest(targetURL), "_blank");
}
You can download the source file and graphic from the zip here.
BEML for Brightcove Template
Now that we have created our custom SWF component, we need to integrate it into a player. For the purposes of this example, we want the component to appear in the control bar of the video player. Thus, we use the MediaControls BEML component and include the post to MySpace component as a SWF component in the MediaControls. Here is what the BEML for our template looks like:
<Runtime>
<Theme name="Deluxe" style="Light"/>
<Layout boxType="hbox" padding="3">
<VBox>
<VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
<MediaControls id="mediaControls" height="46">
<HBox width="460" height="12" x="10" y="5" gutter="21">
<Label width="31" height="11" vAlign="middle" hAlign="right"
text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}"/>
<VBox>
<Spacer height="1"/>
<Playhead id="playhead" mediaController="{videoPlayer}"/>
</VBox>
<Label width="31" height="11" vAlign="middle" hAlign="left"
text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}"/>
</HBox>
<HBox width="465" height="19" x="5" y="25" 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"
click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}"
toggled="{videoPlayer.playing}"/>
<Spacer/>
<Button id="shareButton" 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 id="linkButton" 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)}"/>
<SWFLoader source="http://localhost/PostToMySpace.swf" width="23" height="16"/>
<Spacer/>
<Button id="maximizeButton" showBack="false" iconName="maximize"
tooltip="controls maximize tooltip" width="19" height="17"
click="{videoPlayer.goFullScreen()}"/>
<Button id="volumeButton" showBack="false" iconName="volume"
tooltip="controls volume tooltip"
width="19" height="17" click="{videoPlayer.toggleVolumeControls()}"/>
<Button id="menuButton" showBack="false" iconName="menu" label="controls menu" height="19"
autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left"
labelOffsetX="19" data="{video\Player.video}"
click="{videoPlayer.toggleMenuPage('Info', data)}"/>
</HBox>
</MediaControls>
</VBox>
</Layout>
</Runtime>
