:: Support :: Additional HD Video Player Example: Working with H264 video and AAC Audio Files

This example utilizes a StreamingPlayer component (320x240 pixels) and the optional Playlist (without thumbnails) and Controller component with play, pause, next, previous, progress controls, volume controls, and controller text enabled (Titanium Skin). This player also utilizes the Flash player detection event handler to redirect users who do not have the necessary Flash player to watch H264 videos. The XML location is set within the Component Inspector and the available playback parameters have been set within the XML.

Basics for loading H264 video and AAC audio files into the HD Video Player:

  1. In terms of supported formats, you can load H264 video and AAC audio files into any ESA HD Video Player (e.g. f4v, mp4, m4a, mov, mp4v, 3gp, or 3g2).

  2. THIS STEP APPLIES TO VERSION 6 ONLY - NOT REQUIRED WITH VERSION 7: If you are hosting your H264 and/or AAC files on a standard web server (i.e. progressive), you must change the file extension to ".flv" (you do not have to re-encode the file, you just alter the extension), and then you load the file just like a FLV file (e.g. specify the path in the Component Inspector, or as a FlashVars, or within a XML playlist).

  3. To stream your H264 and AAC files they must be hosted on a Flash Media Server 3 (or FMIS 3), and you specify the name of the H264 and HE-AAC file as "mp4:videofile.m4a", "mp4:videofile.mp4" or "mp4:videofile.mov" when you load it into the player (i.e. you must include the "mp4:" prefix and the filename extension f4v, mp4, m4a, mov, mp4v, 3gp, or 3g2). Click here to learn more about H264 and HE-AAC.

  4. To watch/listen to H264 and/or AAC files, you must install Flash Player Version 9,0,115,0 or later.

  5. When you use the XML file to load AAC audio files you can position the "Cue Items " feature over the StreamingPlayer component, which will enable you to display an image where the otherwise blank video screen would be (as shown in the example above; notice the images only show when there is no video). You accomplish this by setting the "Enable Cue Points" and "Display Cue Items" parameters to "true" (either in the Component Inspector or in the XML; remember the XML settings override the Component Inspector settings); then in the Component Inspector you set the "Cue Items X & Y" coordinate parameters to 0, and the "Cue Items Height & Width" parameters equal to the height and width of the StreamingPlayer component. After publishing your new SWF, you will need to embed the player in your webpages and set up your XML to include the "Cue Points" and "Cue Items" nodes (can be applied to both primary streams and preroll items) - see Additional Examples: Cue Points and Cue Items for more info.
    Link to example XML file.

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 "h264.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