Introduction
In this article, I am going to describe the video tag in HTML5.
Video Tag
One of the exciting features of HTML5 is <video>tag. Video Tag was introduced in HTML5. A video tag is used for adding video or media file in an 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 accepts an attribute that specifies how the video should be played. You can write content in <video> tag. <video> tag always occur in pair. Any content between the opening and closing tag is "fallback content". this content is displayed only by those browsers that do not support the video tag. Now, most of the video is shown by the 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 |
The video will start playing automatically. |
| autobuffer |
autobuffer |
The video will start buffering automatically. |
| loop |
loop |
Video automatically starts 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