Cross-Browser Flash Video Player
Javascript for Controls and Properties
And a Draggable Progress Bar and Load Bar
Uses the swfobject player
 ( Drag this  under the video) 

This page uses the "swfobject" javascript to create, initialize and control the flash player (see swfobject documentation here). This javascript for "swfobject" can be downloaded from this page.

The javascript code to initialize the flash player on this a page looks like this:

 var flashvars = {};
 var params = {
 autostart: "true" ,
 menu: "false" ,
 loop: "true" ,
 allowscriptaccess: "always" ,
 };
 var attributes = {};
 swfobject.embedSWF(
 "http://www.bauer.uh.edu/parks/misrocks/jen15_MOV0DD_4_9_2009.swf",
 "fout",
 "360", "270",
 "9.0.0","expressInstall.swf",
 flashvars, params, attributes);

 Elapsed Seconds:  of  Frames:  of  (% complete)
 
   
 
Jennifer Lowry (UH MIS graduate 1997) with Molly and the Ringwalds.
Performing "Come on Eileen" by Dexy's Midnight Runners
April 2008 -- Continental Club -- Houston, Texas
 

For using a Flash player in a cross-browser setting, I am relying on the cross-browser javascript code from the swfobject site (see this). This javascript code provides way to embed a flash player on an HTML page that overcomes some cross-browser issues.

  1. The first step is to include the downloaded "swfobject" javascript inside the <head> tags like this:

    <script type="text/javascript" src="swfobject.js"></script>

  2. Then (as shown above) the player is created in javascript like this:

    var flashvars = {};
    var params = {
    autostart: "true" ,
    menu: "false" ,
    loop: "true" ,
    allowscriptaccess: "always" ,
    };
    var attributes = {};
    swfobject.embedSWF(
    "http://www.bauer.uh.edu/parks/misrocks/jen15_MOV0DD_4_9_2009.swf",
    "fout",
    "360", "270",
    "9.0.0","expressInstall.swf",
    flashvars, params, attributes);
    

  3. Three possible structures can be used to pass data in/out of the swfobject.

    1. The methods allow one to specify a list of flash variables that communicate with the flash movie if you utilize the flash programming environment. (we are NOT doing this, so the initial structure named "flashvars" above contains no data).

    2. Secondly one can provide parameters (in the "param" structure as shown above). These parameters for the "swfobject" are (see the Adobe site here for a complete discussion of the values):

    3. Attributes of the swfobject can also be specified in the attribute object:
      • id
      • name
      • styleclass
      • align
      We are using NO attributes in this example.

  4. Then the "swfobject" is created by:

    swfobject.embedSWF(swftoplay, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)

    Of the following attributes, the first 5 are ALL REQUIRED:

    • swfUrl specifies the URL and filename of your video
    • id specifies the id of the HTML element to contain the video (see the next step)
    • width specifies the width of your video
    • height specifies the height of your video
    • version specifies the Flash player version your video (format is: "major.minor.release")
    • expressInstallSwfurl specifies the URL of your express install SWF and activates Adobe express install
      [ see http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75].
      The express install will only fire once (the first time that it is invoked),
      that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms,
      and that it requires a minimal SWF size of 310x137px.
    • flashvars specifies your flashvars with name:value pairs
    • params specifies your nested object element params with name:value pairs
    • attributes specifies your object's attributes with name:value pairs

  5. The second argument of the swfobject.embedSWF above is the "id" of a DIV or SPAN block where the flash player is to be created. In this example, the following DIV block appears on the HTML page:

    <DIV id="fout"></DIV>

    The id of this DIV (i.e., "fout") is the second parameter of the swfobject.embedSWF.

  6. Once the player has been defined, there are other javascript statements that can control or access the Player data. In every case we must define the player object that was created to use javascript. We do this by:

    document.id player container.property

    or

    document.id player container.method

    In our example, the player was placed in the DIV block with id="fout", so the player reference is:

    document.fout.property

         or

    document.fout.method

    The following properties and methods are available in javascript (ses Adobe's scripting site):

    • IsPlaying()
      e.g., document.fout.IsPlaying()
    • Play()
      e.g., document.fout.Play()
    • StopPlay()
      e.g., document.fout.StopPlay()
      In the example at the top of the page this button is labelled "Pause"
    • Rewind()
      e.g., document.fout.Rewind()
    • PercentLoaded()
      e.g., document.fout.PercentLoaded()
    • GotoFrame()
      e.g., document.fout.GotoFrame(desired frame number)
    • Get (read) or Set (write) a Property

      The following player properties can be controlled with:

      document.player's id.TGetProperty (target,property number) returns a string

          or

      document.player's id.TGetPropertyAsNumber (target,property number) returns a number

          or

      document.player's id.TSetProperty (target,property number)

      The target for the current video is "/".

      • X POSITION (_x) property number= 0 Get or Set
        document.fout.TGetProperty("/",0)
      • Y POSITION (_y) property number= 1 Y_POS Get or Set
        document.fout.TGetProperty("/",1)
      • X SCALE property number= 2 Get or Set
        document.fout.TGetProperty("/",2)
      • Y SCALE property number= 3 Get or Set
        document.fout.TGetProperty("/",3)
      • CURRENTFRAME property number= 4 Get only
        document.fout.TGetProperty("/",4)
      • TOTALFRAMES property number= 5 Get only
        document.fout.TGetProperty("/",5)
      • ALPHA property number= 6 Get or Set
        document.fout.TGetProperty("/",6)
      • VISIBILITY property number= 7 Get or Set
        document.fout.TGetProperty("/",7)
      • WIDTH property number= 8 Get only
        document.fout.TGetProperty("/",8)
      • HEIGHT property number= 9 Get only
        document.fout.TGetProperty("/",9)
      • ROTATION property number= 10 Get or Set
        document.fout.TGetProperty("/",10)
      • TARGET property number= 11 Get only
        document.fout.TGetProperty("/",11)
      • FRAMESLOADED property number= 12 Get only
        document.fout.TGetProperty("/",12)
      • NAME property number= 13 Get or Set
        document.fout.TGetProperty("/",13)
      • DROPTARGET property number= 14 Get only
        document.fout.TGetProperty("/",14)
      • URL(_url) property number= 15 Get only
        document.fout.TGetProperty("/",15)

  7. The Draggable Progress Bar and Load bar

    This application also demonstrates a progress bar where one can drag a slider and thus move around in the video. The progress bar and load bar are created by using 4 components:

    1. A DIV block to hold the progress bar, load bar and the slider:

      <div id="slider_back" style="text-align:left;z-index:10;position:absolute;background-color:#cccccc;border:1px solid black;height:10px;width:360px;">

       

      This DIV is: positioned absolutely; is 360 pixels wide (same as the video); 10 pixels tall; has a black border all around; aligns its content to the left; has a gray background (same as the page); and a z-index of 10.

    2. The load bar is created from a one pixel gif file ("load_blue.gif"). It is INSIDE the DIV block above. The gif image is stretched to be 10 pixels tall; aligned at the top of the parent DIV block; located 5 pixels from the left of its parent (the DIV block above); and has a z-index of 12. This will be stretched as the video is loaded. It looks like this:

      <img id='blue_bar' align='texttop' style="position:absolute;top:0px;left:5px;z-index:12;" src="load_blue.gif" height="10" width="the width varies">

    3. The progress bar is created from a one pixel gif file ("black1x1.gif"). It is INSIDE the DIV block above. The gif image is stretched to be 10 pixels tall; aligned at the top of the parent DIV block; located 5 pixels from the left of its parent (the DIV block above); and has a z-index of 15. This will be stretched as the video plays. It looks like this:

      <img id='progress_bar' align='texttop' style="position:absolute;top:0px;left:5px;z-index:15;" src="black1x1.gif" height="10" width="the width varies">

    4. The draggable slider is also an image (named "soundtrack.gif"). The image looks like this at 2x magnification:

      This image is ALSO inside the parent DIV block. The image will move along WITH the progress bar -- UNLESS it is dragged left or right. It: has a z-index of 20; is located 10 pixels from the left edge of its parent and it has an id="slider" (we will use this id later)

      <img id="slider" align="texttop" src="soundtrack.gif" style="z-index:20;position:absolute;top:0px;left:10px;">

    Taken all together the HTML page conatins:

    <div id="slider_back" style="text-align:left;z-index:10;position:absolute;background-color:#cccccc;border:1px solid black;height:10px;width:360px;">
    <img id='blue_bar' align='texttop' style="position:absolute;top:0px;left:5px;z-index:12;" src="load_blue.gif" height="10" width="0">
    <img id='progress_bar' align='texttop' style="position:relative;top:0px;left:5px;z-index:15;" src="black1x1.gif" height="10" width="varies">
    <img id="slider" align="texttop" src="soundtrack.gif" style="z-index:20;position:absolute;top:0px;left:10px;">
    </div>

    The dragging capability requires javascript:

    1. the drag-drop javascript code

      I used the DynamicDrive site (here) javascript code to create a draggable slider.
      This code can be downloaded from this site and is placed inside the <head> tags like this:

      <script type="text/javascript" src="dom-drag.js"></script>

    2. the drag-drop code for the slider:
      1. var slider_object = document.getElementById("slider");

        We first identify the object on the HTML page that is to dragged (in this case it is the image "soundtrack.gif" which has the id="slider". We name this draggable object "slider_object"

      2. Drag.init(slider_object, null, 0, progress_bar_width_max, 0, 0);

        We call the drag-drop javascript init method: we first identify the draggable object by its name (i.e., "slider_object"). The drag-drop javascript may use a parent element (we have none here) so we use "null" as the second argument. The next 4 numbers specify how far we can move the draggable object from its original position. The values are: minX, maxX, minY, maxY. So in this case we are only allowing the slider to be dragged progress_bar_width_max (which is 350 pixels). It cannot be moved up or down or left of its original position.

      3. slider_object.onDragStart = function(x,y){refr=1;};

        This says what to do when we start dragging (i.e., when we mouseDown on the object and start dragging it). In this case all we do is set a switch ( refr = 1; -- we'll see it later) that turns off our continuous progress bar while we move the slider.

      4. slider_object.onDragEnd = function (x,y) { tempf = x * frames_per_pixel; document.getElementById('fout').GotoFrame(tempf); document.getElementById('fout').Play(); refr = 0; };

        We specify four things to do when the dragging stops (i.e., when we release the mouse button and drop the slider). "x" and "y" are provided by the drag-drop javascript as input to this function. We use the "x" to tell use how far we have moved the slider HORIZONTALLY from the original position.

        We multiple by this by the constant frames_per_pixel. This is frames-per-pixel and is:

        frames_per_pixel = parseFloat( document.fout.TGetProperty("/",5) ) / parseFloat(progress_bar_width_max))

        Property 5 is total frames in the video. "progress_bar_width_max" is the maximum width of the progress bar. So, each pixel of the progress bar represents "frames_per_pixel" frames of the video. Thus, x * frames_per_pixel is the "frame location" (not pixel location) where the slider was dropped. So, we therefore we use GotoFrame (x * frames_per_pixel) to readjust the location to be played in the video.

        The player stops on a GotoFrame, so we have to Start the player again ( .Play() ) and then reset the "refr" switch to resume the progress bar.

  8. Code for the progress and load bars

    To make the progress bar and load bar move we use a javascript .setInterval method to create a timer which calls a function on a specific time delay. The code is:

    var idTmr = window.setInterval( "page_refresh()" , 500 )

    This "idTmr" object calls the function "page_refresh()" every 500 milliseconds

    The relavent code in page_refresh is:

    function page_refresh() //*** page refresh code
     {
      //
      //*** stretch the load bar as the video is loaded ( 0 < pcl <100 )
      //
      pcl=window.document.fout.PercentLoaded();
      blue_width=parseFloat( pcl*progress_bar_width_max/100);
      document.getElementById("blue_bar").style.width=blue_width.toString()+"px";
    
      if (refr==0) //*** switch to turn on/off updating while dragging
         {
      //*** calculate frames per pixel of progress bar
        frames_per_pixel =
        ( parseFloat(document.fout.TGetProperty("/",5) ) / parseFloat(progress_bar_width_max) );
    
      //*** get the current frame number
        k1=window.document.fout.TGetProperty("/",4);
    
      //*** get the total frame count
        k2=window.document.fout.TGetProperty("/",5);
    
      //*** assumes 25 frames per seconds to calculate the elapsed video time
        player_elapsed_seconds=parseInt(k1/25);
    
      //*** assumes 25 frames per seconds to calculate the total video time
        player_total_time=parseInt(k2/25);
    
      //*** calculate the % done
        pc1=parseInt(parseFloat(k1)/parseFloat(k2)*100.0);
    
      //*** calculate the pixel location if the right end of the progress bar and slider
        pc2=parseInt(parseFloat(k1) / parseFloat(k2) * parseFloat(progress_bar_width_max));
    
      //*** update the progress bar
        if ( pc2 > progress_bar_width_max) //*** we are at the end
         {
         //*** move the bar and the slider to the end
         document.getElementById("progress_bar").style.width = progress_bar_width_max.toString()+"px";
         document.getElementById("slider").style.left = progress_bar_width_max.toString()+"px";
         }
         else
         {
         //*** move the bar and the slider to the new pixel location
         document.getElementById("progress_bar").style.width = pc2.toString()+"px";
         document.getElementById("slider").style.left = pc2.toString()+"px";
         }
    
    }
    
Thanks to Jennifer Lowry and Molly and the Ringwalds for their performance.
Thanks to Blake Gilson and So Ha for the video
artby
parks