In this article I am going to describe about video tag in HTML5.
Video Tag
One of the exciting feature of HTML5 is <video>tag.Video Tag was introduced in HTML5. Video tag is used for adding video or media file in HTML document. It is not present in HTML 4.01. Before this , it was not possible to show a video/movie on the Web Page.For example, you can embed music video or a movie on your web page for the visitor to listen and watch it.
HTML5 video tag accept attribute that specify how the video should be played. You can write content in <video> tag. <video> tag always occur in pair. Any content between opening and closing tag is "fallback content". this content is displayed only by those browsers that does not support video tag. Now, most of the video are shown by plug-in.
Syntax
Syntax of <video>tag in HTML5
<video src="URL"></video>
OR
<video>
<source src="URL">
<source src="URL">
</video>
Browser Support
Browsers such as Opera, Chrome, Internet Explorer 9, Firefox and Safari support the <video> tag in HTML5.
Internet Explorer 8 and earlier versions do not support the <video> tag in HTML5.
Currently, there are three supported video formats available for the <video> element : MP4, WebM and Ogg.
| Browsers |
MP4 |
WebM |
Ogg |
| Internet Explorer 9+ |
YES |
NO |
NO |
| Chrome 6+ |
YES |
YES |
YES |
| Firefox 3.6+ |
NO |
YES |
YES |
| Safari 5+ |
YES |
NO |
NO |
| Opera 10.6+ |
NO |
YES |
YES |
Mime Types for Video Format
| Format |
MIME type |
| MP4 |
video/mp4 |
| WebM |
video/webm |
| Ogg |
video/ogg |
Attributes of the <video> tag
| Attribute |
Value |
Description |
| autoplay |
autoplay |
Video will start playing automatically. |
| autobuffer |
autobuffer |
Video will start buffering automatically. |
| loop |
loop |
Video automatically start over again when done. |
| controls |
controls |
In order to show the controls. |
| poster |
URL of the image |
URL(address) of the image. |
| src |
URL |
Address of the video. |
| width |
pixel |
Defining the width of the video. |
| height |
pixel |
Defining the height of the video. |
Example of the <video> tag in HTML5
Step 1
Coding of the <video> tag in HTML5
!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Video Tag in HTML5</title>
</head>
<body>
<h1 syyle="color:gray">Implementation of Video Tag in HTML5</h1>
<video width="350" height="400" controls loop>
<source src="C:\Users\ashwani\AppData\Local\Temp\wht_parrot.mp4" type="video/mp4">
<p>You are reading because your browser does not support HTML5 video element</p>
</video>
</body>
</html>
Step 2
Output
![video.jpg]()