How to Add a Video Player to Your Page

Here are the instructions for adding a basic video player to your web page, one that can be included as part of your page design and even take some CSS styles. Your video will need to be exported properly for web playback, so be sure to explore how to do this within the video editing program you use. For instance, Final Cut Pro offers an option for exporting for web playback.

Generally, you will want to add your video with a "controller" so that the visitor to your page can choose when to play/pause, control volume, and even skip ahead within the video if he/she wants to. But these same instructions can be used to embed a video player in your page without this controller, just by turning that setting off. Just realize this can be annoying to a visitor that may or may not want to watch a video on that page, or would just like to be able to control the volume or other settings on her/his own.

To add the video controller (and associate a video file with it), you will need to work in Code mode. Select the paragraph or table cell or div where you want to place the controller, switch from Design mode to Code (or Split) mode, and add the following code into that element:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab" class="movie">

<param name="SRC" value="FOLDER/YOUR-VIDEO-FILE.mov" />

<param name="AUTOPLAY" value="false" />

<param name="CONTROLLER" value="true" />

<embed src="FOLDER/YOUR-VIDEO-FILE" width="320" height="256" autoplay="false" controller="true" pluginspace="http://www.apple.com/quicktime/download/" class="movie"></embed>

</object>

This text gets copied and pasted exactly as I have shown it above, where you will just need to replace "FOLDER/YOUR-VIDEO-FILE.mov" with the folder and file name for the video you wish to use (somewhere inside your site folder, of course).

Just adding this exactly as is should give you a working video player, but let me explain what these different parts mean. First off, "width" and "height" will depend on the size of your video file, as exported for web display -- so make note of this when you create the web-ready video. "src" tells it where to find your audio file. "controller" when set to "true" will show the controller. If set to "false", there will be no controller on the screen. This is how you would add video to your site without a controller, but I personally don't recommend this. "autoplay" determines whether the audio file will play when the page opens (true or false), and this would obviously need to be set to "true" if you want to have a video play without a controller.

One final note is why you see essentially two different controllers contained in the code above. There really are two controllers shown here, and Dreamweaver even may give you an error acknowledging this. But this is intentional. The "embed" version of the controller works in some browsers, while the "object" (with its companion "param" tags) works in those browsers that don't support "embed". You will only have one controller -- this doubled code just maximizes the effectiveness of this controller in various browsers.

Okay, you have added a video player to your web page. You can even add multiple players in this format to the same page, although this may not function well if visitors try to play more than one video at the same time.

One final warning. Be conservative. Realize that video files are often quite large. You probably don't want to include them on a primary page to your site, where the browser needs to download them each time the visitor goes to that page. I recommend putting these video players on sub-pages to your site -- similar to having the video open in its own window, but embedding the video with the above technique allows you to style that page, add text or graphics, and even keep your menu so that the visitor can navigate from this page with ease.

 

Return to Resources page.