Introduction
The HTML <video> element is used to embed video content in web pages. It provides a way to include video players with support for various formats and controls. The <video> element allows for easy integration of video playback in HTML documents.
Basic Video Element
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Video Example</title>
</head>
<body>
<video width="600" height="400" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Attributes of the <video> Element
src
Specifies the URL of the video file. Typically used inside the <source> element.
width and height
Specifies the width and height of the video player.
controls
Adds video controls, such as play, pause, and volume.
autoplay
Specifies that the video will start playing as soon as it is ready.
loop
Specifies that the video will start over again, every time it is finished.
muted
Specifies that the audio output of the video should be muted.
poster
Specifies an image to be shown while the video is downloading or until the user hits the play button.
Example with All Attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video with Attributes</title>
</head>
<body>
<video width="600" height="400" controls autoplay loop muted poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Multiple Video Sources
To ensure compatibility with different browsers, you can provide multiple sources for the same video. The browser will use the first recognized format.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Video Sources</title>
</head>
<body>
<video width="600" height="400" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Captions and Subtitles
You can add captions and subtitles to your video using the <track> element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video with Captions</title>
</head>
<body>
<video width="600" height="400" controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
Your browser does not support the video tag.
</video>
</body>
</html>
Example: WebVTT File (subtitles_en.vtt)
WEBVTT
00:00:00.000 --> 00:00:05.000
Welcome to our video.
00:00:05.000 --> 00:00:10.000
In this part, we will show you the basics of HTML video.
Customizing Video Controls with JavaScript
You can customize video controls using JavaScript to create a more interactive experience.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Video Controls</title>
<style>
#custom-controls {
display: flex;
justify-content: center;
margin-top: 10px;
}
#custom-controls button {
margin: 0 5px;
padding: 10px;
}
</style>
</head>
<body>
<video id="myVideo" width="600" height="400" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="custom-controls">
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
</div>
<script>
var video = document.getElementById('myVideo');
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function stopVideo() {
video.pause();
video.currentTime = 0;
}
</script>
</body>
</html>
Example: Combining Different Video Elements
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combined Video Example</title>
</head>
<body>
<video width="600" height="400" controls autoplay loop muted poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
Your browser does not support the video tag.
</video>
</body>
</html>
Conclusion
The HTML <video> element is used for embedding video content on web pages. It supports various attributes for customization, multiple video sources for compatibility, captions, and subtitles for accessibility, and can be enhanced with JavaScript for custom controls. Understanding and utilizing the <video> element allows for a rich multimedia experience on web pages.