HTML 5 Video

Many sites use video. HTML5 provides a standard for displaying videos.

Videos on the Web site

Until now, there is still no standard for displaying videos on web pages.

Today, most videos are displayed through plug-ins (such as Flash). However, not all browsers have the same plug-ins.

HTML5 specifies a standard method for including video through the video element.

HTML5 (video)-how it works

To display a video in HTML5, all you need is:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the HTML5 video tag.
</video>

</body>
</html>

The <video> element provides play, pause, and volume controls to control the video.

At the same time, the <video> element also provides width and height attributes to control the size of the video. If the height and width are set, the required video space will be reserved when the page loads. If these properties are not set, the browser does not know the size of the video, the browser can no longer reserve a specific space when loading, and the page will change according to the size of the original video.

The content inserted between the <video> and </video> tags is provided for display by browsers that do not support the video element.

The <video> element supports multiple <source> elements. The <source> element can link different video files. The browser will use the first recognizable format:

Video format and browser support

Currently, the <video> element supports three video formats: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES
  • MP4 = MPEG 4 file with H.264 video encoding and AAC audio encoding
  • WebM = WebM file with VP8 video encoding and Vorbis audio encoding
  • Ogg = Ogg file with Theora video encoding and Vorbis audio encoding

Video format

Format

MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 <video>-Use DOM for control

HTML5 <video> and <audio> elements also have methods, attributes and events.

The methods, attributes and events of the <video> and <audio> elements can be controlled using JavaScript.

The methods are used to play, pause, and load. The attributes (such as duration, volume, etc.) can be read or set. The DOM events can notify you, for example, the <video> element starts playing, has been paused, has stopped, and so on.

The simple method in the example shows us how to use the <video> element, read and set attributes, and how to call methods.

Example

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play / Pause</button> 
  <button onclick="makeBig()">enlarge</button>
  <button onclick="makeSmall()">Zoom out</button>
  <button onclick="makeNormal()">ordinary</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support the HTML5 video tag.
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script> 

</body> 
</html>

For more references, please check the HTML5 Audio/Video DOM Reference Manual .

HTML5 Video tags

Label Description
<video>

Define a video

<source>

Define multiple media resources, such as <video> and <audio>

<track>

Defined in the media player text track