MattsBits
MattsBits

MattsBits

Embed Media Player In Web Page With HTML  

by Matt Hawkins, 09/07/2011
Categories : HTML & CSS

Assuming your users have Media Player (or a suitable browser plugin) installed you can embed Media Player and play videos within your sites web pages.

This is an assumption some people might not like to make but in certain environments (i.e. corporate) it is perfectly acceptable.

To embed media player you can use the following example HTML code. You will have to replace "yourvideofile.wmv" with a link to a suitable video file on your web server.

The code uses both the <object> and <embed> html tags as this will allow it work in the widest range of browers.


<OBJECT ID="MediaPlayer" 
     WIDTH="400" HEIGHT="225"
	 CLASSID="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6"
STANDBY="Loading Windows Media Player ..." TYPE="application/x-oleobject">
<PARAM name="url" VALUE="yourvideofile.wmv">
<PARAM name="ShowControls" VALUE="false">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<PARAM name="autostart" VALUE="true">
<EMBED TYPE="application/x-mplayer2" 
	 src="yourvideofile" name="MediaPlayer"
	 width="400" height="225"
	 ShowControls="0" ShowStatusBar="0" ShowDisplay="0"
	 autostart="1">
</EMBED>
</OBJECT>


Width & Height
In the example code the width and height is set to 400x225. You can change this as required.

ShowControls
This determines the visibility of the player controls (play, stop buttons etc). You can turn this on or off by setting the "ShowControls" parameter to "true" or "false". In the example above it is set to "false".

Status Bar
The status bar displays information about the current video such as filename and runtime. You can turn this on or off by setting the "ShowStatusBar" parameter to "true" or "false". In the example above it is set to "false".

ShowDisplay
The display box lists the current filename and the contents on any current playlist. You can turn this on or off by setting the "ShowDisplay" parameter to "true" or "false". In the example above it is set to "false".

Autostart
You can turn this on or off by setting the "autostart" parameter to "true" or "false". In the example above it is set to "true".

Note : As both object and embed tags are used in the example you must remember to adjust the parameters within each tag. This means each change you make will be made twice.

Note : When using Media Player 6.4 the "url" param is named "filename"

CLASSID
You will notice the strange classid parameter. This is a specific value for specific versions of Windows Media Player.

The classid values for the last versions of Media Player are :

Windows Media Player 11
CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6 (same as WMP7)

Windows Media Player 10
CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6 (same as WMP7)

Windows Media Player 9
CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6 (same as WMP7)

Windows Media Player 7
CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6

Windows Media Player 6.4
CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95

Playlists
To set up a playlist of video files you need to create a metadata file.

<asx version = "3.0">
  <title>Matts Video Playlist</title>
  <entry>
    <title>Title of Video 1</title>
    <ref href="video1.wmv" />
  </entry>
  <entry>
    <title>Title of Video 2</title>
    <ref href="video2.avi" />
  </entry>
</asx>


Save and name this file "playlist.asx".

Then in your embed html change the "url" parameter to point to this asx file.

<PARAM name="url" VALUE="playlist.asx">


You can now use the "next" and "previous" buttons to skip between videos.

Author : Matt Hawkins  Last Edit By : Matt Hawkins
PHP Powered  MySQL Powered  Valid XHTML 1.0  Valid CSS  Firefox - Take Back The Web  EUKHost - Recommended Webhosting Solutions

MattHawkins CMS v3.0 - Copyright 2009-2017