:: Support :: Additional HD Video Player Examples: Cue Points and Cue Items for Prerolls and Streams

This example shows how to use the Cue Points and Cue Items features to display dynamic text and graphics at specific times while your videos play. This example utilizes a StreamingPlayer component (400x300 pixels) and the optional Controller component with play, pause, progress controls, volume controls, and controller text enabled (Titanium skin). The XML location is set using FlashVars in the embed scripts and the available playback parameters have been set within the XML (the Cue Items size and location is set within the Component Inspector). Notice that the scrubber/progress system is disabled while the preroll advertisement is displayed (disabled using settings in the Component Inspector).

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 Cue Points and Cue Items features in your existing HD Video Player FLA (Flash 8/CS3/CS4 and 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 "Enable Cue Points" and "Display Cue Items" to "true". Then set the "Cue Items Height, Width, X, and Y" parameters according to your own specifications (NOTE: the "enableCuepoints" and "displayCueitems" parameters can be set in the XML, which will override the Component Inspector settings).
  2. The following steps assume that you are using both prerolls and streams, but the preroll items are optional, so if you don't want to use them, you can ignore all references to prerolls below. If you want to use preroll items, you should check out the Preroll Videos example for more infomation before proceeding.
  3. Add the <prerollCuepoints> and <streamCuepoints> nodes to your XML to establish the cue points array for the related video (Link to XML example). These arrays should always start at "0", and the numbers in the arrays are time in seconds separated by an asterisk (*). NOTE: you can omit these nodes for any preroll or stream item to disable the cue points for a particular video.


    In the above cue points array examples, the cue point events will be dispatched at 0, 10, and 20 seconds.
  4. To utilize the built-in Cue Items feature to display dynamic graphics and text when cue points are dispatched, add the <prerollCueitems> and <streamCueitems> array nodes to your XML (Link to XML example). You can use basic html to define and arrange the text/graphics, and you can add classes to the "textstyles.css" file to format the text. You should always use the CDATA tag in these nodes to allow for special characters. You must specify an equal number of items in the cue items array as are specified in the associated cue points array (an asterisk (*) should be used as the separator). You can use blanks in the cue items array for periods when you do not want to display anything (e.g. to display nothing at time "0" use a space followed by an asterisk " *", and use an asterisk followed by a space at all other times "* ").

    <prerollCueitems><![CDATA[ *Text* ]]></prerollCueitems>
    <streamCueitems><![CDATA[ *Text* ]]></streamCueitems>

    In the above cue items array examples, nothing will be displayed at time "0" (i.e. when the first cue point is dispatched), the string "Text" will be displayed when the second cue point is dispatched, and nothing will be displayed when the third cue point is dispatched.
  5. Advanced users can utilize the "cuepoint" event handler in the FLA to extend the capabilities of the cue point system (e.g. to trigger other features of a custom application).

    function handleEvent(evt) {
    if (evt.type == "cuePoint") {
    myDisplay.addEventListener("cuePoint", handleEvent);

  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="410" height="340" >
    <param name="movie" value="TYPE PATH TO SWF HERE" />
    <param name="FlashVars" value="videos=videos.xml" />
    <embed src="TYPE PATH TO SWF HERE" width="410" height="340" 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 "cuepoints.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