Sample: A Social Sharing Widget

This sample presents a player that includes a custom Flex component that the viewer can use to share a video with social media sites like Facebook, Digg, or Reddit. If you are looking to integrate a custom Flash or Flex component into one of your Brightcove 3 player templates, this is a good starter example. The player is built with a custom BEML player template. Note that modification of BEML templates requires a Pro or Enterprise publisher account.

Here's a demo of the player:

Download the source.

Custom sharing component

In the component's init function, the Brightcove Player API is used to retrieve information about the player and the video that is currently loaded. We retrieve the player's URL, the current video's display name and short description. This information is used to populate the link, title and desc variables which will be used as URIs that can be incorporated into a submission URL for the corresponding social media site. We also add event listeners that will wait for the user to click the sharing site's button in the player UI:

public function init():void{
    vidPlayer = mPlayer.getModule("videoPlayer");
    var curVid:Object = vidPlayer.getCurrentVideo();
    var exp:Object = mPlayer.getModule("experience");
    link = encodeURIComponent( exp.getExperienceURL() );
    title = encodeURIComponent( curVid.displayName );
    desc = encodeURIComponent( curVid.shortDescription );
 
    rdbut.addEventListener(MouseEvent.CLICK, share_rd);
    fbbut.addEventListener(MouseEvent.CLICK, share_fb);
    dgbut.addEventListener(MouseEvent.CLICK, share_dg);
}

The custom UI component displays a row of three buttons that submit the video to Reddit, Facebook, and Digg:

<mx:Resize id="grow" widthTo="150" />
<mx:Resize id="shrink" widthTo="25" startDelay="150" />
<mx:HBox paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" 
         backgroundColor="0xffffff" width="496" height="34"
         borderStyle="solid" borderColor="0x000000">
   <mx:Button id="rdbut" icon="@Embed(source='icon_reddit.gif')" label="Share to Reddit"
              width="25" height="24" rollOverEffect="{grow}" rollOutEffect="{shrink}"/>
   <mx:Button id="fbbut" icon="@Embed(source='icon_facebook.gif')" label="Share to Facebook"
              width="25" height="24" rollOverEffect="{grow}" rollOutEffect="{shrink}"/>
   <mx:Button id="dgbut" icon="@Embed(source='icon_digg.gif')" label="Share to Digg"
              width="25" height="24" rollOverEffect="{grow}" rollOutEffect="{shrink}"/>
</mx:HBox>

Each of the buttons invokes a function that submits the player URL and video information to the corresponding social site's entry path for sharing media. For example, here is the Facebook sharing function:

private function share_fb(e:Event):void{
    var url:String = 'http://www.facebook.com/sharer.php?u='+link+'&t='+title;
    var urlRequest:URLRequest = new URLRequest(url);
 
    vidPlayer.pause();
    navigateToURL(urlRequest, "_blank")
}

BEML Source

Here's the BEML code to create this template. To use it, copy and paste this code into the "New Template" dialog in the Publishing module.

<Runtime>
  <Theme name="Deluxe" style="Light"/>
  <Layout>
    <VBox padding="10">
      <VideoPlayer id="videoPlayer"/>
      <SWFLoader width="480" height="35" source="http://help.brightcove.com/sharer.swf"/>
    </VBox>
  </Layout>
</Runtime>

This template is identical to the simple Video Player template, except that it adds a custom component with the SWFLoader element. The SWFLoader element provides the URL of the custom component; its width and height attributes, as well as its placement within the same VBox that holds the VideoPlayer element, specify where the custom component is rendered in relation to the rest of the player.