HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  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

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:
<embed src="http://www.youtube.com/v/VNj6VFaLCd0" width="300" height="200" />
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 tutorial.

Attributes of the <embed> tag

Playing a video file in WMV format with <embed>

<embed src="/video/soccer.wmv" width="250" type="x-ms-wmv" height="260" volume="85" autoStart="0" autoplay="false" />
Output:

Playing a video file in Flash format with <embed>

<embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/VNj6VFaLCd0" width="300" height="200">
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.

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.

Attributes of the <object> tag

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

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

Playing a video file in MPEG format with <object>

<object type="video/mpeg" data="/video/toy_cars.mpg" width="200" height="40"> <param name="src" value="/video/toy_cars.mpg" /> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> <a href="/video/toy_cars.mpg"> Watch a classic commercial </a> </object>
Output:

Playing a video file in Flash format with <object>

<object width="425" height="344" type="application/x-shockwave-flash"> <param name="movie" value="http://www.youtube.com/v/VNj6VFaLCd0&hl=en&fs=1" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.youtube.com/v/VNj6VFaLCd0&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
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>

<object type="video/x-ms-wmv" data="/video/soccer.wmv" width="320" height="255"> <param name="src" value="/video/soccer.wmv"> <param name="autoStart" value="0"> <a href="/video/soccer.wmv">Cool soccer goal</a> </object>
Output:

Playing a video file in QuickTime format with <object>

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="/video/soccer.mov" width="320" height="255"> <param name="src" value="/video/soccer.mov" > <param name="controller" value="true" > <param name="autoplay" value="false"> <object type="video/quicktime" data="/video/soccer.mov" width="320" height="255"> <param name="controller" value="true" > <param name="autoplay" value="false"> <a href="/video/soccer.wmv">Cool soccer goal</a> </object> </object>
Output:

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

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.

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

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.
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information