HTML5 Video Tag

Earlier you used to write lengthy scripts with the use of object and elements in order to play a video clip which was quite cumbersome. With HTML5 supporting <video> tag, it has become very easy and simple for you to play any video file in any browser.

HTML5 uses <video> tag for embedding video in HTML file as a native element as <img> tag . It works same as <video> and the only difference is that it has three attributes poster, width and height. Poster is a non moving or still image file displayed on the screen before the video is played and screen size of the vidoe is determined by the two attributes width and height.

You can usually use video formats like mp4, webm, ogg, H.264, AAC, Theora which are supported by different web browsers. You can incorporate these varied video formats to HTML using <source> tag and the browser will use the format it recognises first and will run the video file.

Syntax

<video width="250" height="300" controls autoplay>
<source src="clip.ogg" type="video/ogg" poster="image1.png"/>
<source src="clip.mp4" type="video/mp4" poster="image1.png"/>
<source src="clip.webm" type="video/webm" poster="image1.png"/>
</video>

HTML5 Video Tag Example

<!DOCTYPE HTML>  
<html>  
<head>  
	<meta charset=UTF-8" />  
	<title>HTML5 Audio Element Example</title>  
</head>  
<body bgcolor="#fvvyee">
<video controls style="width:540px;height:250px;" 
poster="../images/nature.png">
<source src="../sounds/Ducks_Preview.mp4" 
type='video/mpeg;codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</body>
</html>

This will produce following result

In above example, src is the URL of your video file. Providing MIME type i.e. type="video/mpeg" is optional but it is good to provide it for faster working of the browser. With the use of autoplay, the browser will play the video file without asking for visitor's permission. You should be using the poster attribute if you don't want the user to see nothing at the start of the video clip.

As of writing, only few browser is providing support this new feature.

Browser Supports

Video Tag Attributes

Attributes	Value	Description
controls	Boolean attribute	This is used to make the native video player appear.
autoplay	Boolean attribute	This is used to automatically play an video clip.
loop	Boolean attribute	This is used to keep repeating your video clip.
src	URL	This is used to set url of video clip.
preload	None \| Metadata \| Auto	This is used to set buffering of video clip : none - do not buffer video file automatically. metadata - only buffer the metadata of video file. auto - buffer video file before it gets played.
width	Width in pixels	This is used to set width of video player.
height	Height in pixels	This is used to set height of video player.
poster	URL of a image file	This is used to display poster image until the first frame of video has downloaded.