header_graphic
header_gradient
 
:: Support :: Additional HD Video Player Examples: Javascript Media Loading

This example utilizes a StreamingPlayer component (480x270 pixels) and the optional Controller component with play, pause, progress/scrubber controls, volume controls, and controller text enabled (Titanium Skin - Blue color scheme). The playback parameters have been set within the FLA (i.e. no XML is used in this example). The default single video location is set using FlashVars, and JavaScript is used to load new videos in real-time (i.e. no page refresh).

External Javascript Thumbnail Links - Click to Load
Departed 3:10 To Yuma Inconvenient Truth Ghost Rider Smokin Aces
 
External Javascript Text Link - Click to Load
DaVinci Code
 
Load Your Own Video or Query the Current Video

Enable FlashVars and JavaScript media loading in your existing HD Video Player FLA (Flash 8/CS3/CS4 required):

  1. If you are using the Zoom or Phantom players, you can skin to bullet #6 below, because they are already configured for FlashVars and JavaScript support. Otherwise, open your player FLA and select the StreamingPlayer on the stage then open the Component Inspector and make sure the "Single Video Location" and "XML Location" parameters are blank
  2. The StreamingPlayer component should have the instance name "myDisplay", and the Controller component should refer to myDisplay in the "Video Player Instance" parameter field in its Component Inspector.
  3. Add the following scripts to the Actions Panel of your FLA (scene 1: frame 1) - NOTE: if your FLA already has scripts that enable the use of FlashVars, you will need to delete those scripts and replace them with the following. NOTE: you can alter these scripts to accomodate more dynamic approaches (e.g. change all occurrences of ".xml" to ".asp" or ".php" to load dynamically-generated XML files):

    var vmode:Number;
    var mediaVar:String;
    var videos:String;
    var fms:String;
    var app:String;
    videopath._visible = false;

    loadVideoFV();

    function handleEvent(evt) {
    if (evt.type == "start") {
    if(vmode == 2){
    videopath.text = myDisplay.currentStream;
    mediaVar = videopath.text;
    }
    } else if (evt.type == "mediaTime"){
    loadMediaJS();
    }
    }
    myDisplay.addEventListener("start", handleEvent);
    myDisplay.addEventListener("mediaTime", handleEvent);

    function loadMediaJS(){
    if(videopath.text != mediaVar && videopath.text.indexOf(".xml") !== -1){
    mediaVar = videopath.text;
    vmode = 2;
    myDisplay.loadXML(videopath.text);
    } else if(videopath.text != mediaVar && videopath.text.indexOf(".") !== -1 && videopath.text.indexOf("mp4:") == -1){
    mediaVar = videopath.text;
    vmode = 1;
    myDisplay.playStream(videopath.text);
    } else if(videopath.text != mediaVar && fms !== undefined && app !== undefined){
    mediaVar = videopath.text;
    vmode = 1;
    myDisplay.playStream(videopath.text,fms,app);
    }
    }

    function loadVideoFV(){
    videopath.text = videos;
    mediaVar = videopath.text;
    if(videopath.text.indexOf(".xml") !== -1){
    vmode = 2;
    myDisplay.loadXML(videopath.text);
    } else if(videopath.text.indexOf(".") !== -1 && videopath.text.indexOf("mp4:") == -1){
    vmode = 1;
    myDisplay.playStream(videopath.text);
    } else if(fms !== undefined && app !== undefined){
    vmode = 1;
    myDisplay.playStream(videopath.text,fms,app);
    }
    }


  4. Add a "TextInput" component (in the Flash component menu under "User Interface") to the stage and give it an instance name of "videopath".
  5. 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/Javascript to load your content the player will not work on your desktop.
  6. 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, and you must use the 'id="myFlashMovie"' parameter in the object tag, and the 'name="myFlashMovie"' and 'swliveconnect="true"' parameters in the embed tag. You will also need to add the 'allowfullscreen="true"' parameter to the object and embed tags if you are using a fullscreen player (e.g. Phantom or Zoom). 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="330" height="280" id="myFlashMovie" >
    <param name="movie" value="ENTER PATH TO SWF HERE" />
    <param name="FlashVars" value="videos=ENTER PATH TO MEDIA HERE" />
    <embed src="ENTER PATH TO SWF HERE" width="330" height="280" FlashVars="videos=ENTER PATH TO MEDIA HERE" swliveconnect="true" name="myFlashMovie"
    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>


    - Use "videos=myvideo.flv" to load a single progressive video
    - Use "videos=videos.xml" to load a XML playlist (streaming and/or progressive)
    - Use "videos=myvideo&fms=www.streamingserver.com&app=myapplication" to load streaming videos

  7. You will also need to add the following "getFlashMovieObject", "SendDataToFlashMovie", and "ReceiveDataFromFlashMovie" javascript functions to the header of your web document:

    <script type="text/javascript" language="JavaScript">
    function getFlashMovieObject(movieName) {
    if (window.document[movieName]) {
    return window.document[movieName];
    }
    if (navigator.appName.indexOf("Microsoft Internet")==-1) {
    if (document.embeds && document.embeds[movieName])
    return document.embeds[movieName];
    }
    else {
    return document.getElementById(movieName);
    }
    }
    function SendDataToFlashMovie(param) {
    var flashMovie=getFlashMovieObject("myFlashMovie");
    flashMovie.SetVariable("videopath.text", param);
    }
    function ReceiveDataFromFlashMovie() {
    var flashMovie=getFlashMovieObject("myFlashMovie");
    var message=flashMovie.GetVariable("mediaVar");
    document.controller.Data.value=message;
    }
    </script>


  8. Now add the JavaScript onClick events to your text and/or thumbnails in the body of your web document (downloadable the example files below for a working demo). These links are used to load a single video or XML playlist into the HD Video Player in real-time (i.e. no page refresh):

    // for a single progressive FLV or H264/AAC file
    onClick="SendDataToFlashMovie('video.flv');"

    // for a XML file
    onClick="SendDataToFlashMovie('videos.xml');"

    // for a single streaming FLV file (the server (fms) and application (app) must be defined as FlashVars in the embed scripts).
    onClick="SendDataToFlashMovie('video');"

    // for a single streaming H264/AAC file (the server (fms) and application (app) must be defined as FlashVars in the embed scripts).
    onClick="SendDataToFlashMovie('mp4:video.mov');"

  9. Please Note: When loading a single video file it must include accurate duration metadata. When loading a streaming FLV video you should leave off the ".flv" extension. If you want to stream your H264 and HE-AAC files you must make sure your server is 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" (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.

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