Video Tag in HTML5

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
  1. !DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  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>  
  14.    
  15. </body>  
  16. </html> 
Step 2
 
Output
 
video.jpg

Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles