Video Tags in HTML5

The HTML video tag is used for streaming video files such as a movie clip, song clip on the web streams.

mp4
webm
ogg

The controls attribute adds audio controls, like play, pause, and volume.

The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

Video tag Attributes (Optional Attributes) :

Attribute	Used for
src	define the location of the video file
autoplay	define that the video will start playing as soon as it is ready
controls	define that video controls should be displayed
height	Sets the height of the video player
width	Sets the width of the video player
loop	define that the video will start over again, every time it is finished
muted	video should be muted
poster	Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload	how the author thinks the video should be loaded when the page loads

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - Tutor Joes</title>
	</head>
	<body>
	<table cellpadding="10" cellspacing="10">
		<tr>
			<th>mp4 format file</th>
			<th>ogg format file (src attr)</th>
			<th>webM format file</th>
		</tr>
		<tr>
			<td>
				<video controls height="300" width="200">
					<source src="video.mp4" type="video/mp4">
				</video>
			</td>
			<td>
				<video src="video.ogg" controls autoplay height="300" width="200">
				</video>
			</td>
			<td>
				<video controls autoplay muted height="300" width="200">
					<source src="video.webm" type="video/webm">
				</video>
			</td>
		</tr>
		<tr>
			<th>loop attribute</th>
			<th>poster attribute</th>
			<th>preload attribute</th>
		</tr>
		<tr>
			<td>
				<video controls autoplay muted loop height="300" width="200">
					<source src="video.webm" type="video/webm">
				</video>
			</td>
			<td>
				<video controls  height="300" width="200" poster="tj.jpg">
					<source src="video.webm" type="video/webm">
				</video>
			</td>
			<td>
				<video controls autoplay height="300" width="200" preload="metadata">
					<source src="video.webm" type="video/webm">
				</video>
			</td>
		</tr>
	</table>
	</body>
</html>

Output :

Video Tags in HTML5

Video tag Attributes (Optional Attributes) :

Example :

Output :

HTML5 Tutorial