1. Technology

How to Add Video to a Web Page

Embed Quicktime Video in Your Web Pages

By

Media player
otisabi/iStock Vectors/Getty Images

It's easier than you think to add a movie to your Web pages. You just need to be willing to write code with a deprecated tag - embed as well as the object tag.

First Upload Your Video to Your Web Server

Create your video as a .mov or .mp4 file - and then upload it to your Web server. I recommend testing the URL pointing to your movie file before you build your Web page so that you know that it works correctly.

Write down the full URL to your video file - you'll need it when you write your HTML.

Use the Object Tag to Embed Your Video Validly

The object tag is not widely supported, but it is the only way to add a QuickTime video into your pages using valid HTML. There are two attributes that you need to include to get the video to play correctly:

  • classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  • codebase="http://www.apple.com/qtactivex/qtplugin.cab"

You'll also want to set the width and height of the object - set the width to the width of the movie and the height to the height plus 15-20 pixels extra to include the controls. Your object tag will look like:

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

Parameters Make the Object Work

The only parameter that you need is the src parameter - this tells the browser where to find the movie to play. Set the src attribute to the URL of your movie:

 <param name="src" value="http://URL to movie.mov" /> 

Some other parameters that can be useful to control your video and make it more user-friendly are:

  • controller - this can be true or false. Remember that most people get very frustrated if they can't control multimedia elements on Web pages that they visit. So I strongly recommend setting this to true.
  • autoplay - this can be true or false. Autoplay also annoys customers. They want to decide when and whether to watch the video. So I strongl recommend setting this to false.

Inside the <object> tag, place the following parameters:

 <param name="controller" value="true" />
 <param name="autoplay" value="false" /> 

Finally, Include an Embed Tag with the Same Information

If it is very important to you that all your pages validate, then you should not include this section. But remember that only people with some browsers like Safari and Opera will be able to view your video.

The embed tag should look like this. Note that all the fields are the same as the :

 <embed src="http://URL to movie.mov" width="960" height="555"
 autoplay="true"
 controller="true"
 pluginspage="http://www.apple.com/quicktime/download/">
 </embed> 

And then close the object tag:

</object>

You can see a working video online and view the source to see the entire source of the object and embed tags in action: Rambling

©2014 About.com. All rights reserved.