<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'>
</OBJECT>

This code is placed on the web page. You decide on:

• the object id for the player
• width/height (normally in the ratio of 4:3)
• any parameters you wish to preset at the time the page is loaded. Each parameter must have the correct param name= value and a valid value (see reference guide above). If you don't specify, player properties take on their default value as defined in the reference guide. In this example we DO NOT USE the HTML "param options" -- but set all the values in the script. See this for common "param" values set in the HTML code and browser differences.
  
• in the script code, you define a reference to the player object for IE javascript such as :

  var Player=document.all.m1;

  where the HTML object tag says:

  <OBJECT id="m1" width...</OBJECT>

  then in the subsequent lines you would say for example:

  Player.uiMode="none";

  The choice of the name "Player" and "m1" are arbitrary. They just as well could be "fred" and "alice".

Common player methods are (we use the arbitrary object name "Player"):

• Player.close closes the current media file (not the player itself)
• Player.fullScreen=true; switches the player to full screen
• Player.playState returns an integer that defines the current state of the player. Vallues are:
  • 0 Undefined Windows Media Player is in an undefined state.
  • 1 Stopped Playback of the current media item is stopped.
  • 2 Paused Playback of the current media item is paused. When a media item is paused, resuming playback begins from the same location.
  • 3 Playing The current media item is playing.
  • 4 ScanForward The current media item is fast forwarding.
  • 5 ScanReverse The current media item is fast rewinding.
  • 6 Buffering The current media item is getting additional data from the server.
  • 7 Waiting Connection is established, but the server is not sending data. Waiting for session to begin.
  • 8 MediaEnded Media item has completed playback.
  • 9 Transitioning Preparing new media item.
  • 10 Ready Ready to begin playing.
  • 11 Reconnecting to stream.
• Player.uiMode= invisible | none | mini | full | custom ;
• Player.URL= "fully qualified URL/path/filename.filetype";

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):

• Player.settings.autoStart=true|false;
• Player.settings.balance=-100 < integer < 100; (-100 is all left channel audio, 100 is all right audio, 0 is equal left and right), default is 0.
• Player.settings.baseURL=a quoted string that specifies the base HTTP URL that is concatenated with the subsequent relative URLs. A "/" is automatically added to the baseURL when concatenating the two strings.
• Player.settings.setMode(mode, true|false); mode can be: autoRewind | loop | showFrame | shuffle. "autoRewind" means trcaks are restarted to the beginning after play is completed; "loop" means a track or track sequence is repeated continuously; "showFrame" the nearest key frame is displayed at the current position when the video is NOT playing; "shuffle" means tracks are played in a random order.
  
• Player.settings.getMode(mode) mode can be: autoRewind | loop | showFrame | shuffle. Returns either true or false.
• Player.settings.mute=true | false; "true" means athe audio is muted. "false" (the default) means audio is played.
• Player.settings.playCount=integer; a minimum of 1 and a default of one that specifies how many times a video is to be played.
• Player.settings.rate=integer; a read/write double precision that specifies the payback speed. 1.0 is normal. fast forward is 5.0, fast reverse is -5.0
• Player.settings.volume=0 <= integer <= 100 where 0 is muted (no sound) and 100 is full volume (relative to the sound card setting). default is the last volume setting.

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

Player.controls.property();

Common player controls are:

• Player.controls.CurrentPosition a R/W double precision property, number of seconds from beginning of the video
• Player.controls.fastForward(); method to start fast forwarding the video (5 times normal speed)
  can be preceeded by isAvailable("FastForward") which returns true or false.
  Usage: Player.controls.isAvailable("FastForward");
• Player.controls.fastReverse(); method to start fast reversing a video (5 times normal speed)
  can be preceeded by isAvailable("FastReverse") which returns true or false
  Usage: Player.controls.isAvailable("FastReverse");
• Player.controls.pause(); causes the current video to pause
• Player.controls.play(); cause the current video to strat playing or resume if paused.
• Player.controls.stop(); causes the current video to stop playing

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

Player.currentMedia.property;

• Player.currentMedia.duration a read only double precision property that states holds the duration in seconds of the current video
• Player.currentMedia.durationString a read only string that hold the duration of the current video stored in HH:MM:SS format
• Player.currentMedia.name a read only string that holds the name of the current video
• Player.currentMedia.URL a read only string that holds the URL of the current video
• Player.currentMedia.imageSourceHeight a read only that returns the height of the current media in pixels
• Player.currentMedia.imageSourceWidth a read only that returns the width of the current media in pixels

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:

5. 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:

6. 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.

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

8. 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)

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

   <input name="example_slider" size="3" id="example_slider" type="Text" onchange="A_SLIDERS[3].f_setValue(this.value)">  <span style="position:absolute;"> <script language="javascript"> var s1 = { 'b_vertical' : false, 'b_watch': true, 'n_controlWidth': 120, 'n_controlHeight': 28, 'n_sliderWidth': 16, 'n_sliderHeight': 20, 'n_pathLeft' : 2, 'n_pathTop' : 4, 'n_pathLength' : 100, 's_imgControl': 'vidbutback.jpg', 's_imgSlider': 'vidbut.jpg', 'n_zIndex': 10} var s2 = { 's_form' : 'vcform', 's_name': 'example_slider', 'n_minValue' : 0, 'n_maxValue' : 100, 'n_value' : 50, 'n_step' : 1} new slider(s1,s2); </script> <span style="position:absolute;Top:12px;Left:10px;z-index:8;"> <img src="black1x1.gif" height="2" width="100"></span> </span>

   Here is the resulting example slider:  

10. 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 in the "new slider".

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

11. 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