Advertisement

Advertisement


HTML Video

HTML Video Tag

HTML 5 supports <video> tag also. The HTML 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.


<!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.
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.
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.

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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.