How to Imbed Windows Media Player into a Website

On this page, you will find several examples of how to embed Windows Media Player in to a web page. Please excuse the rough look of these pages as they were created very quickly and partly from the remnants of another project. That said, Enjoy!

This is an example of a Full Blown Windows Media player embeded into a web page. This is a great way to display videos right in a webpage, while still allowing the user to have a large ammount of control. This control can be extended through use of custom buttons to preform functions that the default interface does not offer (such as the Full screen button displayed on this page). Media files are loaded into the Player through scripts that the user sees as a button. This is very nice if you want to place a small level of protection on your media and prevent people from "borrowing" it by simply right clicking. I say a small level of protection because if someone is determined to take the file, they could always just look at the source code and discover the file name.... but.... far fewer people will bother to do that then would right click on a normal link.
Feel free to play arround on this site (and yes, Even view the souce code and see how it's done) the little play buttons will play a small sound file (again, this site was quickly put together, orignally a video played when each button was pushed and each button was in a fancy picture... hence the "Click __ for *video*").

*Gator Song*
*

(Start a Video First)
[Works With a site that Plays video in the WMP window
like this site was orignally disigned to do]

Powered by:
(Click to Download)

Here are several more examples. Each one has a slightly different user interface. Depending on what you want to do with your site, different user interfaces can fit different needs.

Source Code Notes:
It is possable to have more then one instance of Windows Media player by changing the ID="****" value in the Object tag that inserts it, just remember to also change the name in your scrips.

The size of the player can easily be ajusted by changing the hight and width values.

Notice the added { PARAM name="uimode" value="mini" } tag to change the User Interface

This example uses the same User interface as the previous one, except the hight and width vaues are set so that the video/visulazation window is trimed off.

This example has the UI interface set to "none" meaning that what ever width and Hight values are specified is taken up completely by video or visualization.

One problem with both this and the next example, the user does not have anyway to pause or ajust any of the other settings for the media player. That problem can be worked arround by creating custom buttons to preform those functions (as is shown in the next example).

In this example, the User interface is set to Invisible, or no interface at all! Even though the player is "Invisible" it still has Hight and width values, and it will "fill" a table and act as a place holder, this is useful if you ever want to set up a player that gives the user an option of what kind of interface they would like, or when you want a player to appear when a button is pushed (so everything else on your page doesnt rearrange on the page.)

Again, some alternative controls must be provided if you want users to have control over things such as pause and stop. To demonstrate this, I have included a stop button (it still looks like a play button because I dont want to bother makeing a new image right now, but it works as a stop button)

Click here to stop audio.
Note that this text and the button above is being pushed down the page by the "invisible" windows media player!

E-Mail Me with any Questions or Comments
Gator