header_graphic
header_gradient
 
:: Support :: Additional HD Video Player Examples: Jump to Specific Video ID

This tutorial shows how to use FlashVars to jump to a specific video ID in the XML playlist. 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 and video ID are set using FlashVars in the embed scripts, and the available playback parameters have been set within the XML. Notice that the player jumps to the fourth video in the playlist instead of the first.

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 utilize the Jump to ID event in your existing HD Video Player FLA (Flash 8/CS3/CS4 and XML required):

  1. Open your FLA in Flash 8/CS3 and select the StreamingPlayer component on the stage - make sure it has the instance name "myDisplay".
  2. Then open the Actions Panel (scene 1: frame 1) and add the following scripts to utilize the "jumpToID" event handler. NOTE: "vid" is the FlashVars variable used to specify the ID of the video that should be loaded when the player loads on the page, so you need to add this variable to your embed scripts as shown in bullet #5 below:

    var vid:String;
    function handleEvent(evt) {
    if (evt.type == "xmlLoaded"){
    myDisplay.jumpToID(vid);
    }
    };
    myDisplay.addEventListener("xmlLoaded", handleEvent);


  3. Add the <ID> nodes to your XML for each video. The ID can be any string of text or numbers (Link to XML example):

    <ID>Name of Video or ID Number</ID>

  4. 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.
  5. 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 information (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 ("video" variable) and video ID ("vid" variable) 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="550" height="280" >
    <param name="movie" value="TYPE PATH TO SWF HERE" />
    <param name="FlashVars" value="videos=TYPE PATH TO XML HERE&vid=TYPE VIDEO ID HERE" />
    <embed src="TYPE PATH TO SWF HERE" width="550" height="280" FlashVars="videos=TYPE PATH TO XML HERE&vid=TYPE VIDEO ID HERE"
    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>


  6. Note about pulling variables from a URL: You can use a server-side scripting language like PHP to dynamically populate the FlashVars when your page loads. For example, let's say you want to pull the XML path and Video ID from a URL that looks like:

    http://www.domain.com/page.php?playlist=http://www.domain.com/videos.xml&vname=Video123

    To pass the URL variables into the video player, you can add the PHP "echo" function to your FlashVars as shown below (note: be sure to use unique variable names in the URL and FlashVars):

    “videos=<?php echo($_GET['playlist']); ?>&vid=<?php echo($_GET['vname']); ?>”

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

footer_graphic

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