Syntax for <video> tag in HTML5 to embed video in web pages

Posted Date: 14-Jun-2011	Category: Internet & Browsers
Author: Tony John	Member Level: Diamond	Points: 100

Thanks to HTML5, we do not need Flash and Silverlight anymore to display video in web pages. In this article, I will discuss how to use HTML5 to embed video files in web pages. Also, I have given the syntax to use video tag.

HTML5 offers a lot of new tags to add rich controls to the web pages. So far, we had to use a lot of plug-ins like Flash and Silverlight to display videos in web pages. HTML 5 is still not an official standard yet and not fully supported by any browsers. But some of the tags like VIDEO are supported by most browsers.

New video tag in HTML5

HTML 5 introduces the new VIDEO tag which can be used to display videos in web pages.

Syntax of VIDEO tag in HTML 5
Here is the syntax of VIDEO tag in HTML 5


<video
src="/videos/myvideo.mp3"
poster="/images/myvideo.pg
preload=none|metadata|auto
autoplay
loop
muted
controls
width="400"
height="400"
>
Your browser does not support video tag in HTML5.
<video>

Attributes of video tag explained:
src: specifies the url of the video file.
poster: indicates the url of an image which will be displayed when there is no video to display.
preload: this is an enumeration with 3 possible values. 'none' indicates the media need not be loaded upfront to reduce server load. 'metadata' indicates only meta data need to be download. 'auto' lets the browser decide how to load it.
autoplay: automatically starts playing the video when the page is loaded.
mediagroup:
loop: Restarts the video automatically when the video finish playing.
muted: the audio will be turned off
controls: display the video controls in the screen
width: width of the video control
height: height of the video control

Anything between the <video></video> will be processed by browsers that do not recognize the <video> tag. So, you may use some text to display an error message or use some other html controls as a fallback mechanism to display an image or video.

Which browsers support VIDEO tag

The following browsers currently support the video tag:

Safari 3

Google Chrome

Internet Explorer 9

Opera 10.5

Firefox 3.5

Since not all web browsers support the <video> tag yet, you must have a fall back mechanism for your video. One of the approaches you can follow is, if the browser does not support HTML5 or does not support <video> tag, then use Flash to play the video. It can be done by using the object tag within the <video> tag. Since the browsers that do not support <video> will skip it, but executes anything that it recognizes, the object tag can be used between <video> tags to show video using Flash. Browsers that recognize the <video> tag knows it has to skip anything between tags <video> and </video>.

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.