Quick Tip: How to use the HTML5 Video Tag

Posted on Tue, November 06, 2012 in Web Design, by Kevin Carpenter

Until now, there has not been a standard for showing a video/movie on a web page without a third-party video plugin like Flash, Silverlight or Quicktime. The control attribute on the video tag also optionally adds video controls to the player (play, pause, volume, etc).

It is a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. Without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change after the video loads.

You should also insert text content between the video tags for browsers that do not support the video element.

The video element allows multiple source elements. source elements can link to different video files. The browser will use the first recognized format. Unfortunately, multiple video formats are still needed as different browsers support different formats.

Here is a how to use the video tag:
<video width="320" height="240" controls="controls">
<
source src="movie.mp4" type="video/mp4">
<
source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</
video

Demo:

Support: Internet Explorer 9 & 10, Firefox, Opera, Chrome, and Safari support the video element.

Note: Internet Explorer 8 and earlier versions, do not support the video element.

Tell Us About Your Project

Invalid phone number