header_graphic
header_gradient
 
:: Documentation :: HD Video Players v.7

IMPORTANT:
If you're using a v.5 player you should click here for the v.5 documentation.
If you're using a v.6 player you should click here for the v.6 documentation.

General File Descriptions:

  • XML - text file (i.e. flat file database) that is used to load multiple video files at run-time
  • SWF - published Flash 8 movie file that is ready for immediate use on a website
  • FLA - Flash document that can be opened and modified using Flash 8, CS3, or CS4
  • AS - these are action script source code files that can be used to modify the components used in the video player (located in the /source/ folder).
  • MXP - Macromedia Extension Package that can be installed into your Flash 8, CS3, or CS4 component menu
  • CSS - Cascading Style Sheet that is used to configure the caption, controls, and playlist text properties
  • HTML - example web page that shows how the published HD Video Player should be embedded in a webpage

Titanium HD Video Player v.7 package includes 1 example layout in FLA and SWF format:

  • Titanium.fla & Titanium.swf - total swf size = 490x472 pixels (includes room for the controls, playlist, and skinning elements)

Phantom HD Video Player v.7 package includes 2 example layouts in FLA and SWF format:

  • Titanium.fla & Titanium.swf - total swf size = 490x472 pixels (includes room for the controls, playlist, and skinning elements)
  • Phantom.fla & Phantom.swf - dimensions set using the height and width attributes specified in the object and embed tags in your webpage (640x360 by default). NOTE: you will need to modify the FLA if the width is < 360 pixels.

Zoom HD Video Player v.7 package includes 2 example layouts in FLA and SWF format:

  • Titanium.fla & Titanium.swf - total swf size = 490x472 pixels (includes room for the controls, playlist, and skinning elements)
  • Zoom.fla & Zoom.swf - total swf size = 480x390 pixels (includes room for the controls, playlist, and skinning elements)

Multichannel HD Video Player v.7 package includes 2 example layouts in FLA and SWF format:

  • Titanium.fla & Titanium.swf - total swf size = 490x472 pixels (includes room for the controls, playlist, and skinning elements)
  • Multichannel.fla & Multichannel.swf - 640x348 pixels (includes room for the controls, playlist, and skinning elements)

dd

Basic use of the Default and Demo HD Video Player Titanium v.7 files (similar for other packages):

  • Upload the following example files and folders to the same location on your server:
    Titanium.swf
    index.html
    videos.xml
    textstyles.css
    /thumbs/ folder
  • Once the HD Video Player is up and running, you can edit the XML file to begin playing your own video files.
  • You can also edit the "videos.xml" file to change the playback behaviors (autoplay, looping, random play, enable Google tracking, and bandwidth detection).
  • You can edit the "videos" FlashVars in the index.html file to load a different XML file (e.g. to use a XML with a different filename or location).
  • You can open the "Titanium.fla" to change the size and other properties of the HD Video player and publish a new SWF.
  • You can modify the "textstyles.css" file to alter the playtime, duration, volume, and playlist text properties.
  • You can install the "ESA_HD_Video.mxp" file to add the HD Video player components to your Flash 8, CS3, or CS4 Component Menu, which makes it easier to access for future projects.

dd

Adding the published HD Video Player Titanium.swf v.7 to your webpages (similar for other players):

To add the published HD Video Player to your webpage you must add the following scripts to your web document wherever you want the HD Video Player to appear. Please note that the swf path (red text), Flash player size (gray text; should be equal to the swf size), and xml path (dark blue text) are specified in two places; and you can alter these variables to meet your needs.

<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="472" id="player" >
<
param name="movie" value="Titanium.swf" />
<param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<
param name="FlashVars" value="videos=videos.xml" />
<embed
src="Titanium.swf" width="490" height="472" FlashVars="videos=videos.xml" allowfullscreen="true" allowscriptaccess="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="player"/>
</object>

dd

Modify the HD Video Player Titanium.fla v.7 and publish a new SWF file (similar for other players):

  • Using your Flash 8, CS3, or CS4 authoring software, open the "Titanium.fla" file.
  • Move the StreamingPlayer component around the stage by selecting it on the stage and dragging it to a new location, or you can use the Properties Inspector to accurately position the component using x and y coordinates (use the same approach for the Playlist and Controller components).
  • Change the size of the StreamingPlayer component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions (use the same approach for the Playlist and Controller components, although you can not alter the height of the Controller component).
  • Modify the video player settings and behaviors (see Table 2 below for options) by selecting it on the stage, then open the Component Inspector to access the list of configurable parameters (use the same approach for the Playlist and Controller components).
  • Once you have finished modifying the component, resize the stage background to fit your modified player, leaving room for a border if necessary, and save your project.
  • Publish or Export your new SWF file.

dd

Install the MXP in your Flash 8 or CS3 Authoring Software:

  • Before installing the MXP file, shut down your authoring software if it is open.
  • Double click the file named "ESA_HD_Video.mxp". This will open the Extension Manager, which will prompt you to complete your installation.
  • Open your copy of Flash 8, CS3, or CS4 and create a new document.
  • Open the Components Panel 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 component to the stage and give it an instance name of "myDisplay". Use the same approach to add the Playlist (give it the instance name "myPlaylist") and Controller (give it the instance name "myControls") components to the stage, and make sure to reference "myDisplay" in the Playlist and Controller component inspector's "Player Instance" parameter fields.
  • Move the StreamingPlayer component around the stage by selecting it on the stage and dragging it to a new location, or you can use the Properties Inspector to accurately position the component using x and y coordinates (use the same approach for the Playlist and Controller components).
  • Change the size of the StreamingPlayer component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions (use the same approach to resize the Playlist and Controller components, although you can not alter the height of the Controller component).
  • Modify the video player settings and behaviors (see Table 2 below for options) by selecting it on the stage, then open the Component Inspector to access the list of configurable parameters (use the same approach to configure the Playlist and Controller components).
  • Once you have finished modifying the component(s), resize the stage background to fit your modified video player, leaving room for a border and skinning elements if necessary, and save your project.
  • Publish or Export your new SWF file.

dd

Modifying the source files and compiling a new component (SWC file):

  • Using your Flash 8, CS3, or CS4 authoring software, open the files named StreamingPlayer.fla and StreamingPlayer.as (located in the /source/ folder).
  • Alter the source files according to your own specifications, and save them.
  • In the StreamingPlayer.fla file, right click the uncompiled StreamingPlayer component in the ‘Library’, and export a new SWC file to:
    c:\Program Files\Macromedia\Flash 8\en\Configuration\Components
  • To get the new SWC to show up in the Component list within your Flash authoring software (in the Windows menu), you’ll either need to close and reopen Flash, or you can use the “reload” button (open the components menu, click the small button just below the close button, and hit reload). Once the component list has been refreshed, you will double click the new StreamingPlayer component to load it on the stage.
  • Use the same approach to create a new Playlist component (files associated with the Playlist component include: StreamingPlayer.fla, Playlist.as, and HtmlCellRenderer.as - located in the /source/ folder). You will also need to right-click the ScrollBarAssets symbol in the Library to open the Properties menu, and toggle the "Export in first frame" option before compiling a new SWC (make sure to deselect this option when compiling the StreamingPlayer and Controller components). PLEASE NOTE: You can not compile a new Playlist component (swc) using Flash CS3 (apparently due to a bug in that version of Flash), so you must have Flash 8 or CS4 to compile a new Playlist component. The pre-compiled Playlist component (swc) that is included in all of our packages works fine in CS3, because it was compiled using Flash 8.
  • Use the same approach to create a new Controller component (files associated with the Controller component include: StreamingPlayer.fla and Controller.as - located in the /source/ folder).

Updating a component in an existing project:

  • First you have to get the new component to show up in the Components Menu within your Flash authoring software (in the Window Menu). If you have downloaded an update from our site, you should install the MXP then open your existing project FLA (Flash should be closed when you install the MXP). If you have created your own SWC using the steps above, you either need to close and reopen Flash, or you can use the “reload” button (open the Components Menu, click the small button just below the close button, and hit reload).
  • Once the Component Menu has been refreshed, you will locate and double click the new component in the list to load it on the stage.
  • 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 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 component near the middle of your screen and delete it.
  • The remaining component on the stage is the updated component with your previous settings.
  • You can now modify the component parameters in the Component Inspector, save your project, and publish a new SWF.

dd

Table1. Default Titanium HD Video Player v.7 Skin with the StreamingPlayer, Playlist, and Controller Components

 

Table2. Configurable Parameters that can be set for the StreamingPlayer, Playlist, and Controller components using the Component Inspector in Flash 8 or CS3.

 

Description of each configurable parameter available within the StreamingPlayer's Component Inspector:

  • 1. Single Video Location - absolute or relative path to a single media file (can be a FLV, H264, or HE-AAC file); leave blank if you're using a XML file or if you're using FlashVars to load your content dynamically.
  • 2. XML Location - absolute or relative path to a XML file; leave blank if you're using a single video file or if you're using FlashVars to load your content dynamically.
  • 3. CSS URL - absolute or relative path to the CSS file that is used to configure all text in the StreamingPlayer, Playlist, and Controller components.
  • 4. Stream Array - array of paths to a set of video files; leave as "[]" if you're using a XML file. The first video in the array goes with the first number in the KBPS array, and so on... Only use this variable if the "Calculate user Bandwidth" parameter is set to "True".
  • 5. KBPS Array - array of bandwidth speeds; leave as "[]" if you're using a XML file. The first speed in the array goes with the first video in the Stream array, and so on... For example, if a user's connection speed exceeds the second number in the KBPS array (e.g. [250,750]), the user will watch the second video in the Stream array. Only use this variable if the "Bandwidth Detection " parameter is set to "True".
  • 6. Flash Media Server - address to a Flash Media Server (this can be a web domain or IP number); leave blank if you are loading progressive videos or if you're using a XML file.
  • 7. Application Name - application name on a Flash streaming server (generally a directory on the server); leave blank if you are loading progressive videos or if you're using a XML file.
  • 8. BitTorrent DNA - variable that determines if the player should attempt to use the BitTorrent DNA peer accelerated content delivery network; users must install the DNA software to use this feature
  • 9. Video Scaling - variable that determines how the video will be displayed within the FLV player window; options include: scale_to_display, constrain_to_display; choose "scale_to_display" if your video is the same aspect as the StreamingPlayer component, or if you want the video to be stretched to fill the display area; choose "constrain_to_display" if you want to preserve the aspect ratio of your video and it does not match the aspect ratio of the StreamingPlayer component.
  • 10. Video Smoothing - variable that determines the video smoothing policy; set to "true" if you want the player to smooth your videos during playback.
  • 11. Bandwidth Detection - variable that determines the bandwidth detection policy; set to "true" if you want to profile your user's bandwidth.
  • 12. Bandwidth JPG Location - absolute or relative path to the JPG image used for bandwidth detection; we recommend a JPG file size > 100 kb and it should be stored on your own web server (do not attempt to use the bandwidth image on our server). If the "Bandwidth Detection" parameter is set to "true", you must enter a valid path in this field.
  • 13. Enable Media Link - variable that determines the display link policy; options include: true, false; set to "true" and populate the "prerollLink/streamLink" nodes in the XML if you want user's to open a new webpage when they click on the StreamingPlayer component.
  • 14. Media Link Target - variable that determines the display link target; options include: _self, _blank, _parent, _top.
  • 15. Enable Auto Play - variable that determines the auto play policy; options include: Yes-always, Yes-on first video, No-on first video, No-always; set to "Yes-always" if you want the player to automatically begin playing all videos; set to "Yes-on first video" if you only want to autoplay the 1st video and pause on the first frame of all others; set to "No-on first video" if you want pause on the first frame of the 1st video and autoplay all others; set to "No-always" if you want the player to pause on the first frame of all videos.
  • 16. Enable Looping - variable that determines the looping policy; options include: continuous, oneTime, singleFile, endStop ; set to "continuous" if you want the player to continuously loop through the videos in the playlist, set to "oneTime" if you want to stop after the player has played all of the videos in the playlist, set to "singleFile" if you want to continously loop through the current video, set to "endStop" if you want the player to pause on the last frame of the current video.
  • 17. Enable Random Play - variable that determines the random vs. sequential play policy; options include: true, false; set to "false" if you want the videos to play in sequence.
  • 18. Enable Google Tracking - enables the Google Analytics tracking nodes in the XML; you must have a Google Analytics account and implement the codes to track your site statistics; options include: true, false.
  • 19. Background Color - hexadecimal color code, applies to the display background.
  • 20. Buffer String X Coordinate - used to specify the horizontal position of the buffer string on the StreamingPlayer component (coordinate is relative to the "x" location of the StreamingPlayer component on the stage). This coordinate also applies to the Connecting and Bandwidth messages.
  • 21. Buffer String Y Coordinate - used to specify the vertical position of the buffer string on the StreamingPlayer component (coordinate is relative to the "y" location of the StreamingPlayer component on the stage). This coordinate also applies to the Connecting and Bandwidth messages.
  • 22. Buffer Type - variable that determines the buffer type; options include: static, variable; set to "variable" if you want to use different buffer times for each user based on their bandwidth; set to "static" if you want to use the same buffer time for each user (use this option for live streaming).
  • 23. Buffer Time Max - amount of movie (in seconds) to download before playing; default is 5 sec. You should always specify a reasonable buffer time unless you are streaming a live video from a Flash Media Server, in which case you should set this variable to 0.
  • 24. Buffer Time Min - amount of movie (in seconds) to download before playing; default is 5 sec. You should always specify a reasonable buffer time unless you are streaming a live video from a Flash Media Server, in which case you should set this variable to 0.
  • 25. Message - Buffering - text displayed in the buffer string text field while the player buffers the video file.
  • 26. Message - Connecting - text displayed in the buffer string text field while the player connects to a streaming server.
  • 27. Message - Bandwidth - text displayed in the buffer string text field while the player profiles the user's bandwidth.
  • 28. Time Format - determines the format of the time text (you should only use this option if you have developed a custom time-display text field as it does not apply to controller component).
  • 29. Display Pause Image - determines whether the Pause Image is visible or not (only visible when paused); options include: Yes-always, Yes-on first frame, Yes-on last frame, Yes-first and last, No-always ; set to "Yes-always" if you want the image displayed whenever the player is paused, set to "Yes-on first frame" if you only want the image to be displayed when the video is paused on the first frame of a video (e.g. when the Autoplay is set to "No-always"), set to "Yes-on last frame" if you only want the image to be displayed when the video is paused on the last frame of a video (e.g. when the Looping is set to "endStop"), set to "Yes-first and last" if you only want the image to be displayed on the first and last frames.
  • 30. Display Paused-Play Button - determines whether the central Play button is visible or not (only visible when paused); options include: Yes-always, Yes-on first frame, Yes-on last frame, Yes-first and last, No-always; set to "Yes-always" if you want the play button displayed whenever the player is paused, set to "Yes-on first frame" if you only want the play button to be displayed when the video is paused on the first frame of a video (e.g. when the Autoplay is set to "No-always"), set to "Yes-on last frame" if you only want the play button to be displayed when the video is paused on the last frame of a video (e.g. when the Looping is set to "endStop"), set to "Yes-first and last" if you only want the play button to be displayed on the first and last frames.
  • 31. Paused-Play Button X Coordinate - used to specify the horizontal position of the central Play button that appears when the player is paused (coordinate is relative to the "x" location of the StreamingPlayer component on the stage); set to "0" if you want the play button to be centered over the StreamingPlayer component.
  • 32. Paused-Play Button Y Coordinate - used to specify the vertical position of the central Play button that appears when the player is paused (coordinate is relative to the "y" location of the StreamingPlayer component on the stage); set to "0" if you want the play button to be centered over the StreamingPlayer component.
  • 33. Display Captions - determines whether the closed captions specified in the XML are visible or not; options include: true, false, controller; set to "controller" if you are using the Controller component and the Enable Caption Button option is set to "true" (the Caption will be invisible by default, and the user will be able to press the "CC" button to turn the captions on/off).
  • 34. Captions Y (from bottom) - determines the "y" coordinate of the top of the caption textfield (coordinate is relative to the bottom of the StreamingPlayer component on the stage; i.e. the higher the number the further up the caption will appear; e.g. if the value is set to 35 the caption will appear 35 pixels above the bottom the StreamingPlayer component; NOTE: the height of the caption textfield is automatically equal to this value and the width is equal to the width of the StreamingPlayer component).
  • 35. Enable Cue Points - determines whether the "prerollCuepoints/streamCuepoints" specified in the XML are recognized by the player or not; options include: true, false.
  • 36. Display Cue Items - determines whether the "prerollCueitems/streamCueitems" specified in the XML are visible or not; options include: true, false. NOTE: the "prerollCueitems/streamCueitems" are related to the "prerollCuepoints/streamCuepoints" respectively, so if you want to display Cue Items, you must define the times when they will be displayed as Cue Points.
  • 37. Cue Items X - determines the "x" coordinate of the cue item's upper left corner (coordinate is relative to the "x" location of the StreamingPlayer component on the stage).
  • 38. Cue Items Y - determines the "y" coordinate of the cue item's upper left corner (coordinate is relative to the "y" location of the StreamingPlayer component on the stage).
  • 39. Cue Items Width - determines the "width" of the cue items (note: images are not automatically resized when they are loaded into the cue items field, so they should be resized/cropped to the appropriate width prior to loading, or you can use a html "width" tag in the XML to set the width).
  • 40. Cue Items Height - determines the "height" of the image (note: images are not automatically resized when they are loaded into the cue items field, so they should be resized/cropped to the appropriate height prior to loading, or you can use a html "height" tag in the XML to set the height).

MP3_config

Figure 1. Screenshot of the parameters available within the StreamingPlayer's Component Inspector

 

 

Description of each configurable parameter available within the Playlist's Component Inspector:

  • 1 - StreamingPlayer Instance - instance name of the StreamingPlayer component (e.g. myDisplay)
  • 2 - Row Height - height of each row in pixels; NOTE: be sure to account for the height of your images and the "vspace/hspace" tags in the XML when calculating the appropriate row height, and realize that the images are not automatically resized when they are loaded into the Playlist component, so they should be resized/cropped to the appropriate dimensions prior to loading, or you can use html "height/width" tags in the XML to set the dimensions.
  • 3 - Disable Playlist on Preroll - determines the Playlist policy when preroll items are specified in the XML; set to "true" if you want the Playlist component to be disabled when preroll items are playing (i.e. user's will not be able to skip past your preroll items, which is ideal for advertisements).
  • 4 - Alternate Row Color 1 - hexadecimal color code, applies to the color of alternating rows (optional); NOTE: this parameter overrides the Background Color and Background Transparent parameters, so it should remain blank if you want to use either of those parameters.
  • 5 - Alternate Row Color 2 - hexadecimal color code, applies to the color of alternating rows (optional); NOTE: this parameter overrides the Background Color and Background Transparent parameters, so it should remain blank if you want to use either of those parameters.
  • 6 - Roll Over Color - hexadecimal color code, applies to the row color when you rollover it with your mouse.
  • 7 - Selection Color - hexadecimal color code, applies to the row color of selected item.
  • 8 - Background Color - hexadecimal color code, applies to the color of playlist background; NOTE: this parameter is overridden by the Alternating Row Color parameters, so those parameters should remain blank if you want to use this parameter.
  • 9 - Background Transparent - determines the transparency status of the playlist; options include: true, false; set to "true" if you want the Playlist background to be transparent. NOTE: this parameter is overridden by the Alternating Row Color parameters, so those parameters should remain blank if you want to use this parameter.
  • 10 - List Border Style - determines the style of the list border; options include: none, inset, outset, solid.
  • 11 - Vertical Scroll Policy - determines the state of the vertical scroll bar; options include: auto, on, off.
  • 12 - Scroll Track Color - hexadecimal color code, applies to the color of the scroll bar track.
  • 13 - Scroll Arrow Color - hexadecimal color code, applies to the color of the scroll bar arrows.
  • 14 - Scroll Border Color - hexadecimal color code, applies to the color of the scroll bar border.
  • 15 - Scroll Highlight Color - hexadecimal color code, applies to the color of the scroll bar highlight.
  • 16 - Scroll Shadow Color - hexadecimal color code, applies to the color of the scroll bar shadow.
  • 17 - Icon Symbol Name - name of a movie clip in the library that is added to the beginning of each row of the playlist (optional).

MP3_config

Figure 2. Screenshot of the parameters available within the Playlist's Component Inspector

 

 

Description of each configurable parameter available within the Controller's Component Inspector:

  • 1 - Video Player Instance - instance name of the StreamingPlayer component (e.g. myDisplay).
  • 2 - Button Color Up - hexadecimal color code, applies to the symbols on the buttons in their _up state.
  • 3 - Button Color Over - hexadecimal color code, applies to the symbols on the buttons in their _over state.
  • 4 - Button Background Color - hexadecimal color code, applies to the background color of each button.
  • 5 - Button Outline Color - hexadecimal color code, applies to the outline color of each button.
  • 6 - Slider Color 1 - hexadecimal color code, applies to the download-progres indicator and the background color of the volume slider track.
  • 7 - Slider Color 2 - hexadecimal color code, applies to the playback-progres bar and the volume level indicator.
  • 8 - Enable Fullscreen Button - determines whether the "fullscreen" button is visible or not; options include: true, false.
  • 9 - Enable Navigation Buttons - determines whether the "previous" and "next" navigation buttons are visible or not; options include: true, false. NOTE: to use this option you must use the "allowfullscreen=true" parameter in the embed scripts, and you must have installed Flash Player v.9,0,28,0 or later; when this button is pressed the player will enter/exit fullscreen and the "fullscreen" event is dispatched (the event can be used to develop custom scripts to manage the player assets in normal and fullscreen modes; e.g. when you enter fullscreen you may want to resize/reposition the Playlist and Controller components).
  • 10 - Disable Navigation on Preroll - determines whether the "previous", "next", and "progress bar/scrubber" controls are enabled while a preroll media item is playing; options include: true, false.
  • 11 - Enable Caption Button - turns the closed caption text field on/off; options include: true, false. NOTE: to use this button you must specify the closed caption text and times in the XML, and you must set the Display Captions parameter in the StreamingPlayer component to "controller" (i.e. when using this option the captions will be invisible by default, and the user will be able to press the "CC" button to turn the captions on/off).
  • 12 - Enable Playlist Button - determines whether the "playlist" button is visible or not; options include: true, false. NOTE: to use this option you must include the Playlist component on the stage and you must give it the same instance name that is specified in the Playlist Instance parameter field (e.g. myPlaylist); when this button is pressed the Playlist will appear/disappear and the "playlist" event is dispatched (the event can be used to develop custom scripts to manage the player assets when the Playlist is visible/invisible; e.g. when it disappears you may want to resize the StreamingPlayer and Controller components).
  • 13 - Playlist Instance - instance name of the Playlist component (e.g. myPlaylist).
  • 14 - Enable Progress Bar - determines whether the "progress bar" and "scrubber" are visible or not; options include: true, false.
  • 15 - Enable Progress Bar - determines whether the "play" and "pause" buttons are visible or not; options include: true, false.
  • 16 - Enable Volume Buttons - determines whether the volume controls are visible or not; options include: true, false.
  • 17 - Volume Preset - sets the default volume level as a percentage; options include: numbers 0 through 100.
  • 18 - Display Text - determines whether the position, duration, button, and volume text are visible or not; options include: true, false.
  • 19 - Text Y - determines the "y" coordinate of the position, duration, button, and volume text (coordinate is relative to the "y" location of the Controller component on the stage).
  • 20 -Button Y - determines the "y" coordinate of the play, pause, next, previous, playlist, fullscreen, captions, and volume on/off buttons (coordinate is relative to the "y" location of the Controller component on the stage).
  • 21 - Scrubber Y - determines the "y" coordinate of the volume and progress scrubbers (coordinate is relative to the "y" location of the Controller component on the stage).
  • 22 - Bar Y - determines the "y" coordinate of the volume and progress bars (coordinate is relative to the "y" location of the Controller component on the stage).
  • 23 - Element Spacing - sets the spacing in pixels between each of the Controller assets.

MP3_config

Figure 3. Screenshot of the parameters available within the Controller's Component Inspector

dd

Working with the XML Playlist:

link to xml example with parameters and all features enabled (includes streaming server, bandwidth profiling, cue points, captions, and preroll example)

link to simple xml example without parameters and a minimal number of features enabled (includes progressive and streaming examples)

Configurable Parameters that can be set within the XML:
(note: parameters set within the xml file will override the published SWF settings)

  • autoplay - "Yes-always","Yes-on first video","No-always","No-on first video"
  • looping - "continuous", "oneTime", "singleFile", "endStop"
  • randomPlay - "true","false"
  • mediaLink - "true","false"
  • linkTarget - "_blank","_self","_top","_parent"
  • pauseImage - "Yes-always", "Yes-on first frame", "Yes-on last frame", "Yes-first and last", "No-always"
  • pausePlayBtn - "Yes-always", "Yes-on first frame", "Yes-on last frame", "Yes-first and last", "No-always"
  • enableCuepoints - "true", "false"
  • displayCueitems - "true", "false"
  • displayCaptions - "true", "false", "controller"
  • googleTracking - "true","false"
  • bitTorrent - "true","false"
  • bandwidthCheck - "true","false"
  • bandwidthImage - path to JPEG image that is >= 100kb in size, the bandwidth image must be on your server. DO NOT ATTEMPT TO USE THE BANDWIDTH IMAGE ON OUR SERVER!!

XML Nodes for loading dynamic content:

  • <ID> - this node is used to define a unique ID for the video
  • <playlist> - used to populate the Playlist component, and is therefore only necessary if you are using the Playlist component. [img src = "path to the thumbnail image"] [hspace = "horizontal padding to the left and right of image in pixels"] [vspace = "vertical padding above and below image in pixels"] [width = "width of image in pixels"] [height = "height of image in pixels"][class='text styles defined in textstyles.css file']. NOTE: the CDATA tag should be used in this node to enable the use of special characters.
  • <pauseImage> - absolute or relative path to an optional JPG, SWF, GIF, or PNG image for each video that is displayed whenever the player is paused (note: only the first from of an animated GIF will be loaded); the size and location of this image is automatically equal to the size and position of the StreamingPlayer component (see "Display Pause Image" parameter in the StreamingPlayer's component inspector).
  • <server> - Flash Media Server address; can be a web address (e.g. www.yourserver.com) or an IP address (e.g. 111.11.11.111).
  • <appname> - application name on the Flash Media Server, which is generally a directory on the server where the videos are stored.
  • <kbps> - kilobytes per second array; required if the bandwidth detection feature is turned on; if you are specifying multiple video options in the streams and prerolls arrays, you should have an equal number of options in the kbps array separated by an asterisk; the first number should always be "100", and the next number sets the threshold for receiving the next video in the streams/prerolls array (e.g. <kbps>100*500</kbps> will only deliver the hires videos to users with a connection speed >500 kbps). NOTE: this array applies to the streams and prerolls array, so you must have an equal number of array options on each of the associated arrays.
  • <prerolls> - filename/path (absolute or relative) to the video file; when using the bandwidth detection feature, you can specify multiple videos in this node separated by an asterisk (e.g. <streams>lores.flv*hires.flv</streams> for progressive, or <streams>lores*hires</streams> for streaming flv files, or <streams>mp4:lores.mov*mp4:hires.mov</streams> for streaming H264 files).
  • <prerollLink> - mediaLink url - the user will be taken to this address when they click the current video. If you do not wish to use this feature, you should set the mediaLink parameter to "false" and delete this node. NOTE: the link target can also be set in the XML.
  • <prerollImpression> - this "virtual" address is used to track the number of impressions for the current video in your Google Analytics account if the googleTracking parameter is set to "true" (string must start with a "/").
  • <prerollClick> - this "virtual" address is used to track the number of clicks for the current video in your Google Analytics account if the googleTracking parameter is set to "true" (string must start with a "/").
  • <prerollCaptions> - this node is used to specify the text and times array for Closed Captions that will appear as an overlay on the video player; each caption/time array item is separated by an asterisk (e.g. <prerollCaptions><![CDATA[(0)Text 1*(10)Text 2*(15) ]]></prerollCaptions> will display the first caption text string at time "0 seconds" and the second text string will be displayed at time "10 seconds" and a blank caption will be displayed at time "15 seconds" and beyond). The captions must start at time "0 seconds", which can be blank (e.g. "(0) "). The Y-location and height of the caption text is defined in the StreamingPlayer's component inspector (see "Caption" parameters). The font color and style of the captions is set within the CSS file (see ".caption" class in the "textstyles.css" file). NOTE: the CDATA tag should be used in this node to enable the use of special characters.
  • <prerollCuepoints> - this node is used to define the times when cue point events will be dispatched. The array times are specified in seconds and are separated by an asterisk (e.g. <streamCuepoints>0*10*20<streamCuepoints> will dispatch the "cuepoints" events at times "0, 10, and 20 seconds"). The cue points must start at time "0 seconds".
  • <prerollCueitems> - this node is used to define an array (items separated by an asterisk) of html-formatted text and images that will be displayed at times defined in the <prerollCuepoints> node, so you must specify an equal number of array items as are defined in the <prerollCuepoints> node (e.g. <prerollCueitems><![CDATA[<img src='image1.jpg' hspace='0' vspace='0' width='60' height='45'>*<img src='image2.jpg' hspace='0' vspace='0' width='60' height='45'>]]></prerollCueitems> will display the specified images at the times defined in the <prerollCuepoints> array). You can specify a blank in the array using the "*" Image files that are supported include JPG, SWF, GIF, or PNG (only the first from of an animated GIF will be loaded). The size and location of the cue items field is defined in the StreamingPlayer's component inspector (see "Cue Items " parameters). NOTE: the CDATA tag should be used in this node to enable the use of special characters.
  • <prerollDuration> - duration of the video file in seconds; you can either use this node to enter the duration manually or you can use the metadata within the video file.
  • <streams> - filename/path (absolute or relative) to the video file; when using the bandwidth detection feature, you can specify multiple videos in this node separated by an asterisk (e.g. <streams>lores.flv*hires.flv</streams> for progressive, or <streams>lores*hires</streams> for streaming flv files, or <streams>mp4:lores.mov*mp4:hires.mov</streams> for streaming H264 files).
  • <streamLink> - mediaLink url - the user will be taken to this address when they click the current video. If you do not wish to use this feature, you should set the mediaLink parameter to "false" and delete this node. NOTE: the link target can also be set in the XML.
  • <streamImpression> - this "virtual" address is used to track the number of impressions for the current video in your Google Analytics account if the googleTracking parameter is set to "true" (string must start with a "/").
  • <streamClick> - this "virtual" address is used to track the number of clicks for the current video in your Google Analytics account if the googleTracking parameter is set to "true" (string must start with a "/").
  • <streamCaptions> - this node is used to specify the text and times array for Closed Captions that will appear as an overlay on the video player; each caption/time array item is separated by an asterisk (e.g. <streamCaptions><![CDATA[(0)Text 1*(10)Text 2*(15) ]]></streamCaptions> will display the first caption text string at time "0 seconds" and the second text string will be displayed at time "10 seconds" and a blank caption will be displayed at time "15 seconds" and beyond). The captions must start at time "0 seconds", which can be blank (e.g. "(0) "). The Y-location and height of the caption text is defined in the StreamingPlayer's component inspector (see "Caption" parameters). The font color and style of the captions is set within the CSS file (see ".caption" class in the "textstyles.css" file). NOTE: the CDATA tag should be used in this node to enable the use of special characters.
  • <streamCuepoints> - this node is used to define the times when cue point events will be dispatched. The array times are specified in seconds and are separated by an asterisk (e.g. <streamCuepoints>0*10<streamCuepoints> will dispatch the "cuepoints" events at times "0 and 10 seconds"). The cue points must start at time "0 seconds".
  • <streamCueitems> - this node is used to define an array (items separated by an asterisk) of html-formatted text and images that will be displayed at times defined in the <streamCuepoints> node, so you must specify an equal number of array items as are defined in the <streamCuepoints> node (e.g. <streamCueitems><![CDATA[<img src='image1.jpg' hspace='0' vspace='0' width='60' height='45'>*<img src='image2.jpg' hspace='0' vspace='0' width='60' height='45'>]]></streamCueitems> will display the specified images at the times defined in the <streamCuepoints> array). You can specify a blank in the array using the "*" Image files that are supported include JPG, SWF, GIF, or PNG (only the first from of an animated GIF will be loaded). The size and location of the cue items field is defined in the StreamingPlayer's component inspector (see "Cue Items " parameters). NOTE: the CDATA tag should be used in this node to enable the use of special characters.
  • <streamDuration> - duration of the video file in seconds; you can either use this node to enter the duration manually or you can use the metadata within the video file.

dd

Configuring player text with the stylesheet (e.g. textstyles.css):

link to css example

The following classes are pre-defined in the default CSS file distributed with our players (textstyles.css):

  • a:link - applies to any link specified in the XML using the html "a href" tag
  • status - applies to the status messages displayed on the StreamingPlayer component (e.g. buffering, connecting, and detecting bandwidth)
  • caption - applies to the closed captions displayed on the StreamingPlayer component
  • videoPosition - applies to the current play time displayed on the Controller component
  • videoLength - applies to the video duration displayed on the Controller component
  • playerVolume - applies to the player volume displayed on the Controller component
  • buttonText - applies to the text that is displayed on the Controller component when you mouse-over a button
  • listStyle(1,2,3, etc) - default classes used to configure the text in the Playlist component as specified in the XML; you can alter the names of these classes and create new ones; you can also apply these (or your own) classes to text specified in the "Cue Items" node of the XML

dd

Converting your media files to work with the HD Video Player:

  • The StreamingPlayer component supports the FLV video format, which is the most popular video format on the internet. You must include metadata in your FLV files for the "duration" if you want to avoid typing this information into the XML playlist. You can create FLV files from a number of different video formats (e.g. avi, mpg, wmv, and mov) using Flash 8, CS3, or CS4; or you can use independent packages like Sorenson Squeeze and Riva FLV Encoder. Please read the following articles for more information: Encode, Deliver, Design: Getting a Grip on Flash Video and Macromedia's page on Video. Metadata can be "injected" into your existing FLV files using swfx.org flv duration v1.1. Programs like Flash 8 and Riva FLV encoder include the metadata automatically.
  • The StreamingPlayer also supports the high-definition H264 video format. You must include metadata in your H264 files for the "duration" if you want to avoid typing this information into the XML playlist. You can convert other video formats to H264 using products like QuickTime 7 Pro. The H264 format is only supported by Flash Media Server 3, so if you want to stream your H264 files you must make sure your server is FMS 3 or FMIS 3, and you specify the name of the H264 file as "mp4:videofile.mp4" or "mp4:videofile.mov" (i.e. you must include the "mp4:" prefix and the filename extension (e.g. ".mov" or ".mp4"). Click here to learn more about H264.
  • The HE-AAC audio format is also supported by the StreamingPlayer, so you must convert all other audio file types to the HE-AAC format. You must include metadata in your audio files for the "duration" if you want to avoid typing this information into the XML playlist. The H264 format is only supported by Flash Media Server 3, so if you want to stream your H264 files you must make sure your server is FMS 3 or FMIS 3, and you specify the name of the HE-AAC file as "mp4:videofile.m4a" (i.e. you must include the "mp4:" prefix and the filename extension ".m4a"). Click here to learn more about HE-AAC.
  • The StreamingPlayer can also display JPG, SWF, PNG, or GIF images in the "Cue Items", "Pause Image", and "Playlist Component" features (images must be hosted on a standard web server; only the first frame of an animated GIF will be loaded), so you need to convert your image files to one of these formats using Flash authoring software or another type of image conversion software. The images you display in the "Cue Items" and "Playlist Component" features will not be automatically resized when loaded into the player, so you should crop/resize your image to fit perfectly within the allocated image spaces, or you should use html "width/height" tags in the XML to resize the images. Images loaded into the "Pause Image" feature are automatically resized to fit within the StreamingPlayer's dimensions (i.e. scaled up or down to fit).

dd

Actionscript Application Programming Interface (API - used for advanced customization):

StreamingPlayer Public Properties (assumes StreamingPlayer has the instance name "myDisplay"):
myDisplay.timeText // returns formatted String value for the current playhead position (xx:xx)
myDisplay.currentStream // returns String value for the current video path/filename
myDisplay.currentID // returns String value for current video specified in the XML
myDisplay.paused // returns Boolean value for the paused flag
myDisplay.currentVideo // returns Number value for the current video's array value (starts with 0)
myDisplay.currentVideoPosition // returns Number value for the current playhead position (seconds)
myDisplay.cuePointNumber // returns Number value for the current cue point (starts with 0)
myDisplay.captionNumber // returns Number value for the current caption (starts with 0)
myDisplay.mediaLength // returns Number value for the duration of the current video (seconds)
myDisplay.videosArray // returns Array content of videosArray
myDisplay.videoCount // returns Number value for the number of videos in the videosArray
myDisplay.pctLoaded // returns Number value for the downloaded video portion (percent)
myDisplay.scrubberPressed // returns Boolean value for the scrubberPressed flag
myDisplay.bandwidth // returns Number value for the calculated bandwidth (kbps)
myDisplay.mediaBytesTotal // returns Number value for total media bytes of the current video
myDisplay.audioVolume // returns Number value for the audio volume (percent)
myDisplay.flashVersion // returns Number value for the Flash Player version
myDisplay.rtmpPath // returns the complete RTMP path for streaming videos
myDisplay.useDNA // returns Boolean value indicating if DNA is enabled
myDisplay.netStream.dna_available // returns Boolean value indicating if DNA has been detected
 
StreamingPlayer Public Methods (assumes StreamingPlayer has the instance name "myDisplay"):
myDisplay.play() // Toggle play
myDisplay.pause() // Toggle pause
myDisplay.playStream(pathToVideoFile:String) // Absolute or relative path to a single video
myDisplay.loadXML(pathToXML:String) // Absolute or relative path to a xml file
myDisplay.restart() // Restart video
myDisplay.seek(n:Number) // Seek to a specific time (seconds) in the video file
myDisplay.prevVideo() // Load previous video
myDisplay.nextVideo() // Load next video
myDisplay.jumpToID(n:String) // The ID value of a video in the XML
myDisplay.jumpToVideo(n:Number) // The position of the video in the videosArray() : starts with 0
myDisplay.audioVolume(n:Number) // Player volume in percent
myDisplay.jumpToVideoPosition(n:Number) // Jump to a particular video position in seconds
myDisplay.setSize(w:Number,h:Number) // Alter the size of the StreamingPlayer component
 
Controller Public Methods (assumes Controller has the instance name "myControls"):
myControls.setSize(w:Number,null) // Alter the width of the Controller component
 
Listener Syntax:
function handleEvent(evt) {
  if (evt.type == "start") {
    trace("start");
  }
}
 
StreamingPlayer Listener Events (assumes StreamingPlayer has the instance name "myDisplay"):
myDisplay.addEventListener("start", handleEvent); // dispatched when a video loads
myDisplay.addEventListener("end", handleEvent); // dispatched when the end of a video is reached
myDisplay.addEventListener("mediaLength", handleEvent); // dispatched when video duration is detected
myDisplay.addEventListener("mediaTime", handleEvent); // dispatched every 0.25 seconds while a video plays
myDisplay.addEventListener("xmlLoaded", handleEvent); // dispatched when a XML file is loaded
myDisplay.addEventListener("play", handleEvent); // dispatched when the player starts to play
myDisplay.addEventListener("pause", handleEvent); // dispatched when the player is paused
myDisplay.addEventListener("bandwidth", handleEvent); // dispatched when bandwidth is detected
myDisplay.addEventListener("connect_success", handleEvent); // dispatched when player connects to a FMS
myDisplay.addEventListener("stop", handleEvent); // dispatched when the player is stopped
myDisplay.addEventListener("buffer_full", handleEvent); // dispatched when the buffer is full
myDisplay.addEventListener("buffer_empty", handleEvent); // dispatched when the buffer is empty
myDisplay.addEventListener("pctLoaded", handleEvent); // dispatched every 0.25 sec while a video loads
myDisplay.addEventListener("cuePoint", handleEvent); // dispatched when a cue point is reached
myDisplay.addEventListener("version", handleEvent); // dispatched when Flash Player version is detected
myDisplay.addEventListener("unload", handleEvent); // dispatched when player is unloaded
 
Controller Listener Events (assumes Controller has the instance name "myControls"):
myControls.addEventListener("playlist", handleEvent); // dispatched when the playlist button is pressed
myControls.addEventListener("fullscreen", handleEvent); // dispatched when player enters/exits fullscreen

dd

Related Links:

dd

Release Notes v.7.1.1:

  • Rearranged the order of the rtmp protocols/ports so people using FMS 2 don't have to wait so long for media files to load (player still tries to use "rtmpe:/" first then tries "rtmp:/").
  • Fixed a bug in the StreamingPlayer component related to the duration detection with preroll media files.
  • Fixed a minor bug related to autosizing extra wide movies.

Release Notes v.7.1:

  • Removed the event handler for the Flash Player detection in our default FLA files (no longer a must-do since most people now have Flash Player 9 or later, and Flash Player 10 is now available)
  • Fixed a bug in the Titanium player related to the visibility of the controls_bg when switching between normal and fullscreen modes
  • Altered the Playlist component so clicking on the current video will not reload the video

Release Notes v.7:

  • Added new options to the "Looping" parameter including: continuous (plays continuously), oneTime (plays the entire playlist then stops), singleFile (loops through a single file), and endStop (player will stop on the last frame of a video)
  • Added new options to the "Pause Image" parameter including: Yes-always, Yes-on first frame, Yes-on last frame, Yes-first and last, and No-always
  • Added new options to the "Paused-Play Button" parameter including: Yes-always, Yes-on first frame, Yes-on last frame, Yes-first and last, and No-always
  • Player now recognizes H264 and AAC extensions for progressive downloads (i.e. you no longer have to change the extension to .flv)
  • Player now checks for RTMPE protocol availabilty when loading videos hosted on a Flash Media server. If RTMPE is not available, the player tries the RTMP, RTMPS, RTMPTE, and RTMPT protocols
  • Integrated support for the BitTorrent DNA peer accelerated content delivery network
  • Player now supports live streams by default (mediaLength is set to infinity)
  • Fixed a bug related to player resizing in fullscreen with high-resolution monitors

Release Notes v.6:

  • Added more configuration options to the Controller component (button background color, button outline color, play/pause on/off, scrubber/progress on/off, y-position and spacing of elements, text on/off) and three new buttons (e.g. fullscreen, playlist, and captions).
  • Added the ability to seek with the Controller component while progressive files download.
  • Added descriptive text to the Controller component that is displayed when you mouse-over buttons.
  • All text on the player is now configured using a stylesheet (CSS), and the path to the CSS file is entered in the StreamingPlayer's Component Inspector (this setting now applies to the StreamingPlayer, Controller, and Playlist components).
  • Reconfigured "Pause Image" so it can be displayed over player when paused (Yes-always, Yes-on first frame, No-always) and it now scales to fit the display.
  • Added support for preroll videos (e.g. great for advertising, navigation controls and playlist can be automatically disabled during preroll).
  • Expanded Google Analytics tracking to separately track the impressions and clicks of preroll items.
  • Added support for multiline closed captions for each video (text and times specified in XML and formatted using CSS).
  • Added support for an ID tag in the XML file for each video (allows you to jump to a specific video in the XML playlist using the built-in event).
  • Added support for fullscreen (by default, entire application goes to fullscreen; can easily be reconfigured using bult-in event).
  • Added support for cue points specified in the XML file (i.e. action script cue points only).
  • Added support for xml/html-configured text and images called cue items (JPG, SWF, PNG, and GIF) at specific times using cue points.
  • Added Flash player detection (easily configured using built-in event).
  • Removed former "Image" and "Caption" features, which have been replaced with the new "Cue Point/Cue Item" and "Closed Caption" features, respectively.
  • Added 2 new listener events to the StreamingPlayer component ("version" and "cuepoint") and 2 new event to the Controller component ("playlist" and "fullscreen")
  • We are no longer recommending the Javascript embed approach (AC_RunActiveContent), because it is no longer required to automatically activate Flash objects in Internet Explorer.

 

Known Bugs or Issues:

  • You can not compile a new Playlist component (swc) using Flash CS3 (apparently due to a bug in that version of Flash), so you must have Flash 8 or CS4 to compile a new Playlist component. The pre-compiled Playlist component (swc) that is included in all of our packages works fine in CS3, because it was compiled using Flash 8.
footer_graphic

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