By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Playing media files on a Website

How to embed Video and Audio streams on a website.

Edited: 2012-11-07 21:57

You likely got to this page because you are a church who would like to upload video and/or audio from your church events to your website, or because you are a company or individual who would like to do the same.

In any case, there are many ways to play Audio and Video on your website. You should however note that HTML doesn't support streaming of these files natively, it may however in the near future, when using the video element.

Flash

This solution gives you the most control over how the player will look and feel.

There are many free Multimedia Players made in flash, so you do not have to buy flash and create your own. Simply download one of the existing players, and follow its instructions, telling how to integrate it with your site..

  1. mcmediaplayer
  2. Flowplayer
  3. flash mp3 player

Note. Brugbart is in no way associated with mentioned players, use on your own responsibility.

Windows Media Video and Audio

Requires that your users either have Windows Media Player, or an alternative player installed on their systems. Further more, you should convert your files to wmv/wma before uploading them.

You can either create a direct link for the media file like below.

<a href="myvideo.wmv">Title Of Video</a>

Or you can include the video directly on your page, using the below HTML.

<object id="MediaPlayer" style="width:480px;height:360px;" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
standby="Loading Windows Media Player components..." type="application/x-oleobject">
<param name="FileName" value="videoFileName.wmv">
<param name="ShowControls" value="true">
<param name="ShowStatusBar" value="false">
<param name="ShowDisplay" value="false">
<param name="autostart" value="false">
<embed type="application/x-mplayer2" SRC="VideoFileName.wmv" name="MediaPlayer"
style="width:480px;height:360px;" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"></embed>
</object>

What you need to note here is the VideoFileName.wmv, which is mentioned two places for compatibility reasons, and the classid, which identifies which ActiveX control to use.

WMP Classids

Older versions also works with newer versions of Windows Media Player for backwards compatibility. The downside is that you are limited to using older formats, using older formats gives the best compatibility, with the majority of users. But its recommended that you tell users to upgrade their player instead.

Version 9 and 10

note. Same as WMP7

Windows Media Player 7

clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6

Windows Media Player 6.4

clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95

Quicktime

This requires that you convert your files to mov, and that your visitors install quicktime on their systems, or use alternative media players.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" style="width:480px;height:360px;"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="SRC" value="videofilename.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="videofilename.mov" style="width:480px;height:360px;" autoplay="true" controller="false" PLUGINSPAGE="http://www.apple.com/quicktime/download/"></embed>
</object>

What you need to note here is the VideoFileName.mov, (mentioned two places for compatibility reasons), replace both of those with your own video or audio file.