:: Support :: Additional HD Video Player Examples: Closed Captions with Prerolls and Streams

This example utilizes a StreamingPlayer component (480x270 pixels) and the optional Controller component with play, pause, progress/scrubber controls, volume controls, closed caption button, and controller text enabled (Widescreen Titanium skin). The XML location is set using FlashVars in the embed scripts and the available playback parameters have been set within the XML. Notice that the scrubber/progress controls are disabled while the preroll advertisement is playing (disabled using settings in the Component Inspector), and you can click the "CC" button to view the closed captions.

This example assumes that you are using FlashVars in your embed scripts to load your media items. Use the Dynamically Load Single Videos and XML Playlists using FlashVars example to learn how to enable FlashVars support in your player (if you're using the default Titanium skin or the player above, FlashVars should already be enabled).

To enable the Closed Caption feature in your existing HD Video Player FLA (Flash 8/CS3/CS4 & XML required):

  1. Open your FLA in Flash 8/CS3/CS4 and select the StreamingPlayer component on the stage (instance name should be "myDisplay"), then open the Component Inspector and set the "Display Captions " to "controller" if you want users to be able to use the Controller component to turn the captions on/off (set to false if you do not want to display captions, set to true if you want the captions displayed at all times; NOTE: the "displayCaptions" parameter can be set in the XML, which will override the Component Inspector settings). You can also set the "Caption Y" location in the Component Inspector, which will move the captions up/down on the stage relative to the bottom of the StreamingPlayer component.
  2. If you're using the Controller component, select it on the stage (instance name should be "myControls"), then open the Component Inspector and set the "Enable Caption Button" to true if you want users to be able to turn the captions on/off. You can also set the "Disable Navigation on Preroll " to true if you plan to use the preroll feature (or set it to false if you want the navigation controls to be functional while preroll items play).
  3. Add the <prerolls> and <streams> nodes to your XML (NOTE: the <prerolls> node is optional so you can omit it if you do not want to show a preroll item for a particular video; the <streams> node is required). The syntax for the <prerolls> node is exactly the same as the <streams> node (i.e. prerolls can be streaming or progressive, and supported formats include FLV, H264, and AAC format). If you are unsure of the proper syntax, you should check out the Working with a Flash Media Server and Working with H264 Video and AAC Audio Files examples.
    Link to XML example
  4. Add the <prerollCaptions> and <streamCaptions> nodes to your XML and define the time (in seconds) and text array, using an asterisk (*) as the separator (NOTE: the CDATA tag should be used in these nodes to allow the use of special characters). These nodes are optional, so you can omit them if you do not wish to display captions for a particular preroll or stream. The first item in the array should have a time of "0" seconds (ensures that the captions will update properly when seeking with the scrubber/progress system), and you can specify a time with no text if you do not want to display a caption at that time; for example, the following syntax will display no text until the 10-second mark, then "Text" will be displayed from the 10 to 20-second marks, then no text will be displayed beyond 20-seconds:

    <streamCaptions><![CDATA[(0) *(10)Text*(20) ]]></streamCaptions>

    Link to XML example
  5. The caption text style is configured using the ".captions" class in the "textstyles.css" file, and a black glow will appear around the text to ensure that it is visible at all times.
  6. You can now save your project and publish a new network-ready SWF (i.e. set the Local Playback Security to "Access Network Only" in the Publish Settings menu). NOTE: when you use FlashVars to load your content the player will not work on your desktop.
  7. To add the player to your webpage you must add the following scripts to your web document wherever you want the player to appear. Please note that the SWF path, Flash player size (width and height; should be equal to SWF dimensions), and media path (FlashVars; red text) are specified in two places. You can alter these variables to meet your needs, and you can specify a different media path for each instance of the HD Video Player on your site:

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
    width="490" height="310" >
    <param name="movie" value="TYPE PATH TO SWF HERE " />
    <param name="FlashVars" value="videos=videos.xml" />
    <embed src="TYPE PATH TO SWF HERE" width="490" height="310" FlashVars="videos=videos.xml"
    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

To use the example player above without the DEMO text (purchase required):

  1. Install your purchased copy of the MXP in your Flash 8/CS3/CS4 authoring software by double-clicking the file named "ESA_HD_Video.mxp". This will open the Extension Manager, which will prompt you to complete your installation. NOTE: Before installing the MXP file you will have to unpack your downloaded ZIP file and shut down your authoring software if it is open.
  2. Download the example files using the link below, and unpack the ZIP file.
  3. Open the file named "captions.fla" in your copy of Flash 8/CS3/CS4.
  4. Open the Components menu and look for a folder named "ESA HD Video Player". In this folder, there will be three components named StreamingPlayer, Playlist, and Controller.
  5. Add an instance of the StreamingPlayer to the stage by double-clicking it in the menu.
  6. Flash will open a "Resolve Library Conflict" window, and ask if you want to replace the existing item in the library - toggle the "Replace existing items" button and click "OK".
  7. You should now see 2 StreamingPlayer components on the stage; one in the same position as the original, and a new component near the middle of your screen.
  8. Select the new StreamingPlayer component near the middle of your screen and delete it.
  9. The remaining StreamingPlayer component on the stage is the updated component with your previous settings (without the DEMO text).
  10. You can now modify the component parameters, save your project, and publish a new SWF.

:: Download Example Files


Support - Documentation - Skin Wizard - Sample Skins - Tutorials
Copyright © 2003-2012 Earth Science Agency, LLC - All Rights Reserved