Tuesday, December 11, 2007

Adding an embedded Windows Media Player on HTML document

This article describes how to embed Windows Media Player to play music or video in HTML document, it also includes required code in HTML and JavaScript.

To embed Windows Media Player, you need to add an OBJECT element for the Windows Media Player ActiveX control. Here is the code to add the OBJECT element on your web page.
<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player Web Page</TITLE>
</HEAD>
<BODY>

<OBJECT ID="Player" width="320" height="240"
CLASSID="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>

</BODY>
</HTML>

As you can see, there is a CLASSID number there. This CLASSID may differ depends on the Windows Media Player’s version. The CLASSID is for Windows Media Player 7, 9, 10 and 11. If you want to embed Windows Media Player 6.4 instead of the latest version, the class ID is clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95.

Add PARAM Parameters
Besides, you can decide the player’s functionality by adding some PARAM elements. It enables you to specify certain player properties when the page is browsed.

In this example, I had added in 3 parameters which let the media item begins playing automatically and non stop when the page is browsed point to the path of my music file.

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player 7 Control</TITLE>
</HEAD>
<BODY>

<OBJECT ID="Player" width="320" height="240"
CLASSID="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM name="autoStart" value="false">
<PARAM name="filename" value="your_song.wav">
<PARAM NAME = "loop" VALUE = "True">
</OBJECT>

</BODY>
</HTML>

Controlling Windows Media Player using Java script code
Here is a few examples of scripts to control Windows Media Player.
Start playback:
Player.controls.play();
Stop playback:
Player.controls.Stop();
Pause playback:
Player.controls.Pause();
Mute setting:
Player.settings.mute = “1”;
Unmute setting:
Player.settings.mute = “0”;
Volume up setting:
Player.settings.volumn = Player.settings.volumn + 10;
Volume down setting:
Player.settings.volumn = Player.settings.volumn – 10;

Here is the complete code of it. There is only Start and Stop button in this sample. Hope this will help you.

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player 7 Control<SCRIPT>
<!--
function StartPlay ()
{
Player.Controls.play();
}

function StopPlay ()
{
Player.Controls.stop();
}
-->
</SCRIPT>

</HEAD>
<BODY>
<OBJECT ID="Player" width="320" height="240"
CLASSID="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM name="autoStart" value="false">
<PARAM name="filename" value="your_song.wav">
<PARAM NAME = "loop" VALUE = "True">
</OBJECT>

<BR>
<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartPlay()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="StopPlay()">

</BODY>
</HTML>

Note that if you are using version 6.4, you can change the two player methods. In the StartPlay() function change the method to Player.play(), and in the StopPlay() function to Player.stop().

1 comments:

Anonymous said...

Hi - I am really delighted to find this. great job!

 

Get paid for your opinions! Click on the banner above to join Planet Pulse. Its totally free to sign up, and you can earn UNLIMITED. Find out more by visiting PLANET PULSE.
July Code Blog Copyright © 2010 Blogger Template Designed by Bie Blogger Template