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>

</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