This example utilizes a StreamingPlayer component (320x240 pixels) and the optional Playlist and Controller components with play, pause, next, previous, 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. Notice that the playlist and navigation controls are disabled while preroll advertisements are 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 Preroll and Media Link features in your existing HD Video Player FLA (Flash 8/CS3/CS4 required):
- 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 Media Link" to true if you want users to be directed to another webpage when they click the video display area during playback. You can also set the "Media Link Target" in the Component Inspector (NOTE: the "mediaLink" and "linkTarget" parameters can be set in the XML, which will override the Component Inspector settings).
- 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 "Disable Navigation on Preroll " to true (or set it to false if you want the next, previous, and progress/scrubber controls to be functional while preroll items play).
- If you're using the Playlist component, select it on the stage (instance name should be "myPlaylist"), then open the Component Inspector and set the "Disable Playlist on Preroll " to true (or set it to false if you want the playlist to be functional while preroll items play).
- 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
- Add the <prerollLink> and <streamLink> nodes if you want users to be directed to another webpage when they click the video display area during playback (you can omit these nodes for any preroll or stream item to disable the link).
Link to XML example
- 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.
- 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):
- 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.
- Download the example files using the link below, and unpack the ZIP file.
- Open the file named "preroll.fla" in your copy of Flash 8/CS3/CS4.
- 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.
- Add an instance of the StreamingPlayer to the stage by double-clicking it in the menu.
- 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".
- 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.
- Select the new StreamingPlayer component near the middle of your screen and delete it.
- The remaining StreamingPlayer component on the stage is the updated component with your previous settings (without the DEMO text).
- You can now modify the component parameters, save your project, and publish a new SWF.