HTML5 Video Tag

HTML Video Tag

The HTML 5 <video> tag is used to add video files on the web page. The HTML5 <video> element specifies a standard way to embed a video in a web page. The type attribute defines the format of the video file used. This element is very important as it replaced the flash plugin which was an essential software to run video files within the browser.

The HTML5 video tag element is used to add video files in a webpage either from the local storage or it can also be used to embed any external website’s video. The external videos can be embedded by adding their url as a source.

The HTML Video element (<video>) can also be used to add audio content in the webpage but it is always recommended to use the dedicated <audio> tag for audio files. You can use the audio tag in html by using <source src="html-audio.ogg" type="audio/ogg"> syntax.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Video </title>
</head>
<body>
<video width="480" height="320" controls>
<source src="html-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>

Output

HTML Video Tag Examples

How to play '.ogg' File

Syntax
<video width="320" height="240" controls>
   <source src="movie.ogg" type="video/ogg">
</video>

How it Works ?

The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include height and width attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

Note : The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> tag.

HTML Video Formats

Video File Format Media Type
.mp4 Video/mp4
.ogg video/ogg
.webM video/webM

HTML Video Attributes

Video Tag Description
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is not played.
muted It is used to mute the video output.
autoplay It specifies that the video will start playing as soon as it is ready.
controls It Specifies that the video controls gets displayed.
loop It specifies that the video file will start over again, every time when it is completed.
preload It specifies the author view to upload video file when the page loads. It is ignored if autoplay is used.
mute It Specifies that the audio should be muted.
poster It Specifies the image to be shown while the video is downloading.
src It specifies the source URL of the video file.

HTML Video - Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element. These Properties and Methods allows you to load, play, and pause videos, as well as setting duration and volume. The HTML5 <video> element specifies a standard way to embed a video in a web page. The type attribute defines the format of the video file used.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Video Tag Advance </title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video" width="420">
<source src="html-video.mp4" type="video/mp4">
<source src="html-video.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</html>
Script File

<script>
var myVideo = document.getElementById("video");
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>

HTML5 Video Attributes

Tags Description
<video> It sefines a video or movie.
<source> It defines multiple media resources for media elements, such as <video> and <audio>
<track> It defines text tracks in media players.

iframe vs video

Some of the websites like YouTube, uses iframe tags to embed their video on other websites. People get confused over whether to use the video tag or to use the pre-coded iframe tag to embed the video. It is recommended to use the embed code provided by the video streaming services as it will provide much more benefits, settings and optimizations regarding the video.

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
.mp4
Yes
Yes
Yes
Yes
Yes
.ogg
No
Yes
Yes
Yes
No
.WebM
No
Yes
Yes
Yes
No




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »