HTML <video> Tag
HTML
The <video> tag is used to embed a media player which supports video playback in an HTML document.
HTML <video> Tag
➔ The <video> tag contains one or more <source> tags with different video sources and a fallback text to inform the user that the browser does not support the <video> element.
➔ The three different video formats mp4, Ogg, and WebM are generally supported by most browsers.
➔ A <video> control can play both video content as well as audio content. But the <audio> player is more suitable for audio content.
The video tag syntax
<video width="650" height="350" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
This browser does not support the video tag.
</video>
Characteristics of <video> Tag
➔ Most browsers support common file formats like .mpeg, .webm, .mp4, etc.
➔ It is recommended to use multiple formats using multiple source tags for maximum compatibility.
➔ Track tags are used inside video tags to add subtitles or captions.
➔ Video playback can be dynamically controlled using the JavaScript API.
Example: Video playback is controlled using JavaScript.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
<title>HTML muted attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
margin: 20px 0px;
}
input[type='submit'] {
width: 120px;
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #000;
color: white;
text-align: center;
}
input[type='submit']:hover {
background-color: #f6f6f6;
color: #000;
}
</style>
</head>
<body>
<div id="div2" class="mydiv">
<h3>HTML muted attribute example</h3>
<p>The muted attribute is used to specify that the audio output should be muted by default.</p>
<video id="myvideo" controls autoplay muted style='width:100%'>
<source src="resources/media/seaside.mp4" type="video/mp4">
This browser does not support the video tag.
</video><br><br>
<input id="loop" type="submit" value="Loop" onclick="toggleLoop()">
<input id="play" type="submit" value="Play" onclick="playpause()">
<input type="submit" value="Stop" onclick="videoStop()">
</div>
</body>
<script>
let myvideo = document.getElementById("myvideo");
let buttonLoop = document.getElementById("loop");
let buttonPlay = document.getElementById("play");
function toggleLoop() {
if (myvideo.loop) {
myvideo.loop = false;
buttonLoop.value = "Loop Stopped";
} else {
myvideo.loop = true;
buttonLoop.value = "Loop Running";
}
}
function playpause() {
if (myvideo.paused) {
myvideo.play();
buttonPlay.value = "Pause"
} else if (myvideo.play) {
myvideo.pause();
buttonPlay.value = "Play";
}
}
function videoStop() {
myvideo.pause();
myvideo.currentTime = 0;
buttonPlay.value = "Play";
}
</script>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Recommendations for implementing video for the web:
➔ The video size should be small to load quickly, without compromising on quality.
➔ Multiple sources should have multiple formats for video playback.
➔ For maximum user experience and understanding, the video's title should be in multiple languages.
Example: Video playback with subtitles and caption.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag example with subtitles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
<body>
<h3>HTML video tag example with subtitles<</h3>
<p>Video with English/Spanish Subtitles</p>
<p>Change the caption from video player control more options.</p>
<video width="500" height="300" controls>
<source src="./resources/media/seaside.mp4" type="video/mp4">
<track src="./resources/media/mysubtitle_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="./resources/media/mysubtitle_es.vtt" kind="subtitles" srclang="es" label="Spanish">
This browser does not support the video tag.
</video>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
autoplay |
autoplay | Specifies that playback will start automatically as soon as the video is ready. |
controls |
controls | This specifies that video controls should be displayed, such as volume adjusting, retrieval, and playback pause / resume. |
height |
pixels | Specifies height of the video player. |
loop |
loop | Specifies that the browser will automatically return to the beginning after reaching the end of the video. |
muted |
muted | It specifies that the audio output of the video should be muted. |
poster |
url | Specifies an image to be shown while downloading the video. |
preload |
auto metadata none |
This gives the browser a hint that what the author thinks will lead to the best user experience. |
src |
url | It specifies the URL of the video file. |
width |
pixels | It specifies the width of the video player. |
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<video controls>
<source src="video.mpeg" type="video/mpeg">
<source src="video.webm" type="video/webm">
<source src="videodemo.ogv" type="video/ogv">
<source src="vediodemo.mp4" type="video/mp4">
This browser does not support the video tag.
</video>
Click on the "Try it Now" button to see how it works.