Microsoft Media Player 11 Scripting
Basic Parameters (default choice values are underlined)
Cross-Browser Version (click here for a IE version)
  • URL (User Choice in HTML): 
    lyrics
    URL/filename:
     ""
    Usage: Player.URL="url/filename;"
  • autoStart (if false you must press "play")
    false true
    Usage: Player.settings.autoStart="false|true;"
  • mute
    false true
    Usage: Player.settings.mute="false|true;"
  • loop
    false true
    Usage: Player.settings.setMode("loop",true|false);
  • volume
      
    Usage: Player.settings.volume=0 <=; integer value <= 100;
    (default is 50 i.e., half the maximum of the current system volume)
  • balance (left-right audio volume)
      
    Usage: Player.settings.balance=-100 < integer value < 100;
    (default is 0 i.e., equal left right, -100 is all left,
    +100 is all right
  • uiMode (User Interface Mode)
    invisible none mini full
    Usage: Player.uiMode="invisible|none|mini|full"
  • stretchToFit (stretch to fit your HTML specifed width/height)
    false (original size) true (uses the HTML specified height/width)
    Usage: Player.stretchToFit=true | false;

 
   

Player.controls.CurrentPosition (raw):
Formatted (HH:MM:SS) Current Position:

Raw Calculated Remaining Time (raw):
Formated (HH:MM:SS) Calculated Remaining Time:

Player.currentMediaDuration (raw):
Player.currentMedia.DurationString (HH:MM:SS):

Playback Rate= (1 is normal, 2 is double speed, etc.)
Update Timer Interval= milliseconds

The Microsoft Media Player for cross-browser applications (specifically required to work in MS Internet Explorer, Firefox, other Mozilla browsers, etc.) is shown above. The primary differences between this version and the previous one (the IE only version here) are:

  1. Cross-browser Issues

    1. The Player Object
      The cross browser version of the "Player" object defines two versions of the player definition on the webpage. One (for IE) uses the <OBJECT> tag and one for non-IE browsers uses the <EMBED> tag as follows:

      <OBJECT id="user defined object name for the player" width='360' height='270'
      classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'
      codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
      standby='Loading Microsoft Windows Media Player components...'
      type='application/x-oleobject'>
      <EMBED type='application/x-ms-wmp' pluginspage='http://microsoft.com/windows/mediaplayer/ en/download/' id='user defined object name for the player' name='user defined object name for the player' width="360" height="270"><EMBED> </OBJECT>

    2. Cross-browser innerHTML

      I have added a function called "oc" (from Chris Heilman here): 

      function oc(id,cv) //*** cross browser innerHTML
{
if (document.all)
  document.all[''+id+''].innerHTML = cv;
else
	{
	rng = document.createRange();
	el = document.getElementById(''+id+'');
	rng.setStartBefore(el);
	htmlFrag = rng.createContextualFragment(cv)
	while(el.hasChildNodes()) el.removeChild(el.lastChild);
	el.appendChild(htmlFrag);
	}
}
      This code is used to load the player value to DIV blocks on the page for reporting the player status

  2. The Player

    The OBJECT/EMBED code is placed on the web page as shown above.

    You decide on:

  3. Common player methods

    We use the arbitrary object name "Player":

  4. Settings Object

    The player object has a group of settings specified in the player's setting object. Usage is:

    Player.setting.setting property=value

    Common player settings are (defaults are underlined):

  5. Controls Objects

    The controls object is used to provide play controls for the media player. Usage is:

    Player.controls.property();

    Common player controls are:

  6. Media Object

    There are a few really usable media object properties. Usage is:

    Player.currentMedia.property;

  7. slider code

    The slider code used in this example is from SoftComplex.

    The four HTML components are:

    1. a button image to be moved by the mouse. I am using the image named "vidbut.jpg"

      This is the image: . It is 16 pixels wide and 20 pixels tall. Click here to download the image.

    2. a backgound image that the button moves across. This image is named "vidbutback.jpg"

      This is the image: . It is 120 pixels wide and 28 pixels tall. Click here to download the image.

    3. a single pixel black gif image to make the slider's track. This image is named "black1x1.gif"

      This is the image: . It is 1 pixels wide and 1 pixels tall -- but displayed here as 20 by 20. Click here to download the image.

    4. The javascript code is stored in a file named "slider.js". You can download it from the SoftComplex site above or from here. Either way it needs to be saved in the directory where your video application's HTML is stored.

    The HTML code to wire up the images and the javascript is:

    1. the "slider.js" script reference appears in the heading of the HTML page as:

      <script language="JavaScript" src="slider.js"><'/script>

      then on the HTML page are:

    2. the HTML text box that contains the slider's value:

      <input name="slider textbox name" size="3" id="slider textboxname" type="text" onchange="A_SLIDERS[0].f_setValue(this.value)">

      The slider textbox name will be used below.

    3. the code to define the slider is placed in the HTML adjacent to the slider's textbox: 

      <script language="javascript">
var some_structure_name_1 =
   {
   'b_vertical' : false,           //*** vertical is true ;horizontal if false
   'b_watch': true,                //*** continuously update while moving if true
   'n_controlWidth': 120,          //*** width of the background image
   'n_controlHeight': 28,          //*** height of ther background image
   'n_sliderWidth': 16,            //*** width of the slider
   'n_sliderHeight': 20,           //*** height of the slider
   'n_pathLeft' : 2,               //*** slider offset from the left side of the background
   'n_pathTop' : 4,                //*** slider offset from the top of the background
   'n_pathLength' : 100,           //*** width (r height) of the slider movement distance
   's_imgControl': 'vidbutback.jpg',   //*** background image name
   's_imgSlider': 'vidbut.jpg',        //*** slider image name
   'n_zIndex': 10                      //*** z-index
   }
var some_structure_name_2 =
  {
   's_form' : 'vcform',   //*** name (or number) of the form containing the slider
   's_name': 'slider textbox name', //*** name/id of the slider (slider textbox name above)
   'n_minValue' : -100,   //*** minimum value the slider will attain when moved all the way to the left
   'n_maxValue' : 100,    //*** maximum value the slider will attain when moved all the way to the    right
   'n_value' : 0,         //*** initial value the slider (between the two value above)
   'n_step' : 1           //*** precision of the slider movemnt
  }
new slider(some_structure_name_1,some_structure_name_2);
</script>

      This script inserts the slider, and background on the page.

    4. a slider track

      I have added a slider track using the one pixel black gif above. The HTML is:

      <span style="position:absolute;Top:12px;Left:10px;z-index:8;">
      <img src="black1x1.gif" height="2" width="100"></span>

      In this example, the choice of the "top" and "left" properties centers the black track in the background image. Note that the slider has a z-index of 10 and the track has a z-index of 8 (thus the track appears behind the slider)

    5. Here are all HTML page pieces in a textarea for cut/paste:

      Here is the resulting example slider:  

    6. Things that have to match up:

      (a) The two structure names that appear in the javascript that define the parameters of the slider will appear as arguments on the "new slider" line.

      (b) The textbox that contains the slider's value has both a "name" and an "id" attribute. They must be have the same value AND the value must appear in second structure as the value of "s_name".

    7. Multiple sliders

      In order to user multiple sliders on the same page:

      Use a different name/id for each slider textbox. Be sure to change the name in the second structure where the slider is created as the "s_name" value. Then, note in the reference "A_SLIDERS[some_number]" <input name="slider textbox name" size="3" id="slider textboxname" type="text" onchange="A_SLIDERS[some_number].f_setValue(this.value)">

      Here some_number is the sequence number of the slider on the page (the first is zero, the second is one,...). Note that the third slider on this page (the example above) is slider number 2.

    Videos here are wmv formatted from youtube.com