HTML video

Text and graphics are good, and audio is great. But what if you can have videos on your webpages? While audio can make a webpage more interactive resulting in a more interesting and entertaining experience for the user, videos increase this effect even more.

NOTE: The video files on this page may take a few minutes to load. Please be patient.

This lesson focuses on:

Video formats
Playing video with the <embed> tag
Playing video with the <object> tag
Loading video without a webpage
Things to avoid

Video formats

There are several video formats you can use for video on the web. Video includes everything ranging from a short five second video to a long movie going for several hours.

The MPEG Format

MPEG stands for Moving Pictures Experts Group, as this is the group that created this format. This format is supported by several operating systems and all the major web browsers.

Video files in the MPEG format have the file extension .mpg or .mpeg

The Flash Format

Originally developed by Macromedia, this is a very popular format on the web (YouTube runs videos in Flash format). It can run on several different operating systems and is supported by all the major browsers.

Video files in the Flash format have the file extension .swf.

The WMV Format

Originally developed by Microsoft, the WMV format is supported by computers that are running Windows. To be able to play videos in the WMV format on non-Windows computers, a plug-in is required.

Video files in the WMV format have the file extension .wmv.

The QuickTime Format

Originally developed by Apple, the QuickTime format is another common video format on the web. To be able to play videos in the QuickTime format on Windows computers, a plug-in is required.

Video files in the QuickTime format have the file extension .mov

Playing video with the <embed> tag

The <embed> tag can be used to place various media like audio and video on webpages.

NOTE: The <embed> tag is not part of the HTML 4.01 specifications. Despite this, it is still widely used and supported by modern browsers.

NOTE: The <embed> tag has no end tag.

Playing video with <embed> example:

Output:

The above example is very basic and uses just one attribute of the <embed> tag -- the src attribute which is the only required attribute. Below you will find a list of attributes for the <embed> tag as well as some examples for some of the video formats mentioned earlier in this lesson.

Attributes of the <embed> tag

src - Denotes the URL of a video file. This is the only required attribute of the <embed> tag.
type - Denotes the MIME type of the object that will be embedded (in this case a video file). MIME stands for Multimedia Internet Mail Extensions. A MIME type is used to specify a special code for the type of information that a file will contain. For MPEG format use "video/mpeg", for Flash format use "application/x-shockwave-flash", for WMV format use "video/x-ms-wmv", and for QuickTime format use "video/quicktime".
width - Specifies the width of the control panel for the file.
height - Specifies the height of the control panel for the file.
hidden - Takes the value of 'true' or 'false' to specify if the control panel should be displayed or not. The default value is false.
autoStart - Takes the value of 'true' or 'false' to specify if the file should start playing automatically or not. The default value is false.

Playing a video file in WMV format with <embed>

Example:

Output:

Playing a video file in Flash format with <embed>

Example:

Output:

A word of caution when using the <embed> tag:

The <embed> tag is not part of the HTML 4.01 specification. Using it will cause a webpage to not validate with a page validator. Even if it is widely used, using it is still not semantically correct. As an alternative, please use the <object> tag which we will discuss right now....

Playing video with the <object> tag

The alternative to the <embed> tag is the <object> tag. Unlike the <embed> tag, the <object> tag is part of the HTML 4.01 specification and you can create valid webpages with it.

Playing video with the <object> tag is a little more complicated and actually requires use of another tag -- the <param> tag.

Playing video with the <object> tag example:

Output:

You will have to use the <object> tag together with the <param> tag and understand how they work together to play video files with the <object> tag (for some video formats).

The <object> tag is used to actually embed the video file on the webpage.

Attributes of the <object> tag

type - Denotes the MIME type of the object that will be embedded (in this case a video file). MIME stands for Multimedia Internet Mail Extensions. A MIME type is used to specify a special code for the type of information that a file will contain. For MPEG format use "video/mpeg", for Flash format use "application/x-shockwave-flash", for WMV format use "video/x-ms-wmv", and for QuickTime format use "video/quicktime".
data - Denotes the location of the video file.
name - Specifies a name for the video file object.
width - Specifies the width of the control panel for the video file.
height - Specifies the height of the control panel for the video file.

The <param> tag is used to pass parameters to the video file object such as if it should start playing automatically.

Attributes of the <param> tag

name - Some detail about the video file (such as "autoStart") that will be playing.
value - The value for this detail. For example, if the name attribute has the value "autoplay", you can give the value attribute the value "false"

NOTE: The <param> tag does not have a closing tag.

The above example, but this time with comments to make it clearer:

<--Create an object of type video/mpeg (MPEG format video file) the name of the file is toy_cars.mpg and it is located in the /videos directory --> <object type="video/mpeg" data="/videos/toy_cars.mpg" width="200" height="40"> <-- the parameters for the video file are specified with the <param> tag it should be placed inside the <object> tag and you can use it as many times as you need we set three parameters the "src" parameter is used even though it was already specified with the "data" attribute in the <object> tag because some browsers don't read the "data" attribute The "autoplay" parameter is set to "false" so that it will not play automatically. This parameter is understood by QuickTime The "autoStart" parameter is set to "0" so that it will not play automatically. This parameter is understood by Windows media Player and Real Audio. This is why we needed both an "autoplay" and "autoStart" parameter. So that several media players would get the correct instruction --> <param name="src" value="/videos/toy_cars.mpg" /> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> <-- what is the purpose of this data below? it is alternative content to display in case the video file doesn't load it should go right before </object> --> <a href="/videos/toy_cars.mpg"> Watch a classic commercial </a> </object>

Output:

Playing a video file in MPEG format with <object>

Output:

Playing a video file in Flash format with <object>

Example:

Output:

In the above example, we placed an <embed> tag inside the <object> tag as the alternative content. In the case that the <object> tag does not load the video for whatever reason, the <embed> tag should load it.

Playing a video file in WMV format with <object>

Example:

Output:

Playing a video file in QuickTime format with <object>

Example:

Output:

The above example is a little more complicated than the other examples using the <object> tag and requires some explanation.

In the above example, there is an object specified as alternative content if the first object does not load. The first object contains some attributes not seen in the other examples.

classid
This attribute is used to specify the implementation of an object through a special code.
codebase
This attribute specifies where to find the base path to resolve the data found within the classid and data attributes.

The first object is to be used if the user is using Windows, while the content specified as the alternative content is to be used if the user is using a non-Windows operating system.

Loading video without a webpage

Loading video without a webpage is easy. To do so, just put the absolute location of the video file into your browser. For example, the URL for one of our video files is http://www.landofcode.com/videos/toy_cars.mpg. Put this URL into your browser and you will see just the control for the video object.

To provide video to the user without a webpage, you can have a link on a webpage with the same absolute URL.

Example:

<a href="http://www.landofcode.com/videos/toy_cars.mpg"> Watch an old commercial </a>

Output:

Watch an old commercial

Click on the above link to see the video object in the browser by itself without a webpage.

NOTE: Sometimes the video object will not load in the browser by itself, instead a box will appear asking you if you want to download the video.

Things to avoid

When it comes to playing video on a webpage, there are certain things that should definitely be avoided.

Don't let any video start playing automatically when the page loads
Besides being a bad usability practice (someone might have their speakers on full volume and suddenly the sound from the video starts blasting out of nowhere), it is very annoying. Because to shut it off, the user has to scour your webpage to find the control to do so. They can just go ahead and shut off their own volume, but what if they need it or were using it for something else at the moment? This is a bad usability practice and should definitely be avoided.
Don't hide the control for the video file object
The volume may be to high, someone might want to stop the video or start over half way through the video, there are many possibilities. Having that control for the user is an important thing. Do not hide it.