Embedding MPEG-4 Media Files

MPEG-4 Format

To embed a MPEG-4 video file into your web page, you need to use a special HTML code.

The following is the code to embed a MPEG-4 media file for use with QuickTime. You are welcome to copy the following code but remember to replace the "video-filename" with your .mp4 file.

There are two tags that are neccessary: <object> and <embed>.

The <object> tag is for Internet Explorer. The <embed> tag is for Firefox, etc. You may also want to alter the parameters (which is talked about below the example) to your preference.

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"
WIDTH="320" HEIGHT="256" >
<PARAM NAME="src" VALUE="videofilename.mp4">
<PARAM NAME="autoplay" VALUE="true">
<PARAM NAME="controller" value="true">
<EMBED SRC="QTMimeType.pntg" TYPE="image/x-macpaint"
PLUGINSPAGE="http://www.apple.com/quicktime/download" QTSRC="videofilename.mp4"
WIDTH="320" HEIGHT="256" AUTOPLAY="true" CONTROLLER="true">
</EMBED>
</OBJECT>

(Note: HTML elements are case-insensitive.)

For both the <object> tag and the <embed> tag use true (yes) or false (no).

<object> Tag Parameters

When setting the <object> tag parameters, be sure to always enclose parameter values in double quotation marks.

classid="..." - This tells the browser what filetype will be loaded, and what application should handle it. This should be copied completely.

codebase="..." - This tells the browser where to find QuickTime movie player if it is not already installed. If it is not, it will install automatically if the user allows it to.

width and height - When setting the width and height, be sure you set them for at least the width and height of the file itself.

param name="src" value="..." - This is the URL to your file.

param name="autoplay" value="..."- If set to "true", the video clip will begin playing as soon as it completes downloading. The default is set by the user in the settings.

param name="controller" value="..." - If set to "true", the movie controllers will be visible. If this is omitted, the default will be set to "true".

<embed> Tag Parameters

The <embed> tag basically is a duplicate of the <object> tag but is needed to reach just about all other browsers other then Windows IE.

All the parameters: width="..." height="..." play="..." loop="..." quality="high", are the same.

pluginspage="..." - This is the <embed> tag attribute that tells the browser where to find QuickTime movie player if it is not already installed. If it is not, it will install automatically if the user allows it to.

qtsrc="....mp4" - This is the URL to your file.

What Next?

Now that you are equipped with the html video embedding code, all you have to do is place it where you want it in your Web page.

Give it a try and see how it looks. Don't be afraid to experiment! That's the only way you'll know how to place it the way you want in to be displayed on your Web page.

If you want to use a different file format, just choose one.

Flash     Windows Media Files (WMF Videos)     QuickTime     RealMedia