Video Tag in HTML5


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 of <video>tag in HTML5
<video src="URL"></video>
<source src="URL">
<source src="URL">
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
  1. !DOCTYPE html>  
  3. <html lang="en" xmlns="">  
  4. <head>  
  5. <meta charset="utf-8" />  
  6. <title>Video Tag in HTML5</title>  
  7. </head>  
  8. <body>  
  9. <h1 syyle="color:gray">Implementation of Video Tag in HTML5</h1>  
  10. <video width="350" height="400" controls loop>  
  11. <source src="C:\Users\ashwani\AppData\Local\Temp\wht_parrot.mp4" type="video/mp4">  
  12. <p>You are reading because your browser does not support HTML5 video element</p>  
  13. </video>  
  15. </body>  
  16. </html> 
Step 2

Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles