• Home
• About
• Contact
• Link
• Sitemap

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

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.

NOTE: You might need to download and install some plug-ins for some of the videos to work.

This tutorial 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.

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 tutorial.

Playing a video file in WMV format with <embed>

Playing a video file in Flash format with <embed>

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.

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).

NOTE: You can place alternative content between <object> and </object> that will be displayed if the object doesn't load.

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

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

Playing a video file in MPEG format with <object>

Playing a video file in Flash format with <object>

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>

Playing a video file in QuickTime format with <object>

In the above example, The first object contains some attributes not seen in the other examples.

• classid - Specifies the implementation of an object through a special code.
• codebase - Specifies where to find the base path to resolve the data found within the classid and data attributes.

The first object will be used if the user is running Windows, while the second object (the alternative content) will used if the user is running another 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/video/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.

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.

1. 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.
2. 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.