HTML Video
➔ <video> tag uses <source> tag for video files of alternate formats.
➔ The first recognized file will be played.
➔ The controls attribute adds media control buttons on the screen. such as play, pause, volume etc.
➔ If no files recognized by the browsers the text inside <video> tags will be displayed.
HTML video tag example
The HTML video tag is used to include and play video files on a webpage.
Note: Click play button to play the video.
Example (Using src attribute for video)
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag example</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML video tag example</h2>
<section>
<video id="myVideo1" src="path-of-resource" controls></video>
</section>
</body>
</html>
Example (Using <source> tag for video)
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag example</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML video tag example</h2>
<section>
<video id="myVideo2" controls="controls">
<source src="video-path" type="video_type">
</video>
</section>
</body>
</html>
➔ For subtitle use track.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML track tag example</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML track tag example</h2>
<section>
<video id="myVideo2" controls="controls">
<source src="video-path" type="video_type">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
</section>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag 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 video tag example</h3>
<p>The HTML video tag is used to include and play video files on a webpage.</p>
<video id="myvideo" controls autoplay muted>
<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>
//for video
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>
Click on the "Try it Now" button to see how it works.