The Basics - Page 2
June 11, 2001
With all the great interactivity available to Windows Media let's
start with the basics. As I mentioned before, Web page developers
don't always want to be stuck with Microsoft's choice of buttons.
The first step is using
JavaScript
to control the embedded Windows Media player using form style
buttons. These have the advantage of being placed anywhere on
the page and controlling the video, while the Microsoft controls
must be placed directly below the video.
This will work with Netscape 4+ and IE 4+. Document Object Model
(DOM) is a fancy term used to describe how elements on a Web page
are addressed. This code embeds the video in the Web page. You
will need to substitute your own video for
yourfile.asx that I have used as a placeholder.
Notice that we have turned off the Windows Media Player controls
by setting ShowControls equal to false. Place the
following code in the <body> of the document.
<OBJECT ID="WinMedia" width=160 height=120
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
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">
<PARAM NAME="FileName" VALUE="yourfile.asx">
<PARAM NAME="AutoStart" Value="True">
<PARAM NAME="ShowControls" VALUE="False">
<PARAM NAME="ShowStatusBar" VALUE="True">
<EMBED type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/
MediaPlayer/" SRC="yourfile.asx" name="WinMedia"
autostart=1 width=160 height=120 ShowStatusBar=true
ShowControls=false>
</EMBED>
</OBJECT>
[Lines 1-6 above are one line as are lines 11-15. They have
been split for formatting purposes.]
Once we have the video embedded in the Web page we are ready to
use our form style buttons to control the video. The following
code creates three buttons, Play, Pause and Stop. Place the
following in the <body> of the document below
the embedded video described above.
<FORM NAME="PlayerButtons">
<INPUT NAME="Playbtn" TYPE="Button" VALUE="Play"
onclick="document.WinMedia.Play();">
<INPUT NAME="Pausebtn" TYPE="Button" VALUE="Pause"
onclick="document.WinMedia.Pause();">
<INPUT NAME="Stopbtn" TYPE="Button" VALUE="Stop"
onclick="document.WinMedia.Stop();">
</FORM>
[Lines 2 and 3 above are one line as are lines 4 and 5 and 6
and 7. They have been split for formatting purposes.]
These bits of JavaScript code are being used to control the
Windows Media Player through Methods that are built into the WMP.
The main methods that are exposed are:
| Operation | Method |
|---|
| Play | MediaPlayer.Play(); |
| Pause | MediaPlayer.Pause(); |
| Stop | MediaPlayer.Stop(); |
| Previous Track | MediaPlayer.Previous(); |
| Fast Reverse | MediaPlayer.FastReverse(); |
| Fast Forward | MediaPlayer.FastForward(); |
| Next Track | MediaPlayer.Next(); |
This code is great if you want to use the built-in form buttons,
but what if you want to use your own custom graphical buttons
that allow you to control the look and feel? Using your own
graphics allow the developer to build the video into the Web page
and create an integrated application. While Windows Media Skins
give you control over the player when in standalone mode, these
skins can't be used to modify an embedded video. Fortunately,
the code isn't much harder to use your own graphics.
<A HREF="javascript:document.WinMedia.Play()">
<IMG SRC="play.gif" WIDTH="75" HEIGHT="75" BORDER="0"
ALT="PLAY BUTTON"></A>
<A HREF="javascript:document.WinMedia.Pause()">
<IMG SRC="pause.gif" WIDTH="75" HEIGHT="75" BORDER="0"
ALT="PAUSE BUTTON"> </A>
<A HREF="javascript:document.WindMedia.Stop()">
<IMG SRC="stop.gif" WIDTH="75" HEIGHT="75" BORDER="0"
ALT="STOP BUTTON"> </A>
[Lines 1-3 above are one line as are 5-7 and 9-11. They have
been split for formatting purposes.]
Controlling the Windows Media Player with JavaScript is really
very easy. Where it gets difficult is when you start
synchronizing video with other elements on the page, such as
turning graphics into slide shows.
Windows Media: JavaScript Buttons
Synchronized Content - Page 3
|
