Do you think IIT Guwahati certified course can help you in your career?
Introduction
The HTML video tag is used to embed video content on a webpage. It allows you to specify the video file to play, set dimensions, add controls & specify other settings. With the video tag, you can easily include videos in your webpages to make them more engaging & informative for visitors.
In this article, we will discuss about the syntax of the <video> tag, supported formats, additional attributes, and best practices to effectively use it.
Definition and Usage
The HTML <video> tag is used to embed video files into a webpage. It was introduced in HTML5 & provides a standard way to include video content without needing plugins like Flash.
Let’s take a look at the basic syntax of the video tag:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The src attribute specifies the URL of the video file to embed. You can include multiple <source> elements inside the <video> tag to provide different video formats. The browser will use the first recognized format.
Other important attributes of the <video> tag are:
controls: Displays video controls such as play, pause, & volume
autoplay: Starts playing the video automatically
loop: Plays the video in a continuous loop
muted: Mutes the audio output of the video
poster: Specifies an image to display before the video plays
preload: Hints to the browser whether to preload video metadata and/or content
width & height: Sets the width & height of the video player
Let’s take an example using some of these attributes:
<video width="640" height="360" controls autoplay muted>
<source src="nature.mp4" type="video/mp4">
<source src="nature.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
This will embed a 640x360 video that autoplays on mute with the controls shown.
Syntax
The <video> tag provides a simple structure for embedding videos into a webpage. Here is the basic syntax:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Explanation:
<video>: The main tag that defines the video element.
controls: Adds play, pause, and other media controls.
<source>: Specifies the video file and its format.
Fallback text: Shown if the browser does not support the <video> tag.
HTML Video Tags
Basic Example:
Here is a basic implementation of the <video> tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Example</title>
</head>
<body>
<h1>HTML Video Demo</h1>
<video width="640" height="360" controls>
<source src="sample-video.mp4" type="video/mp4">
<source src="sample-video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
The code displays a video player with controls such as play, pause, volume adjustment, and fullscreen options. The browser automatically selects the first supported video format.
Supported Formats
Different browsers support different video formats. Common formats include:
Format
File Extension
MIME Type
Browser Support
MP4 (H.264)
.mp4
video/mp4
Widely supported
Ogg
.ogg
video/ogg
Firefox, Opera
WebM
.webm
video/webm
Chrome, Edge, Firefox
Example with Multiple Formats:
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
<source src="example.webm" type="video/webm">
Your browser does not support the video tag.
</video>
This ensures compatibility with various browsers by providing multiple video sources.
Additional Attributes
The <video> tag supports several attributes to customize its behavior. Here are some common ones:
Attribute
Description
controls
Displays play/pause and volume controls.
autoplay
Automatically plays the video.
loop
Repeats the video indefinitely.
muted
Mutes the video by default.
poster
Specifies an image to display before playback.
Example with Attributes:
<video width="640" height="360" controls autoplay loop muted poster="thumbnail.jpg">
<source src="demo-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Output:
The video starts automatically (autoplay).
It loops continuously.
Audio is muted by default.
A poster image is displayed until the video starts.
More Examples of HTML Video
Example 1: Video with Captions
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Explanation:
<track>: Adds captions or subtitles to the video.
kind="subtitles": Specifies the type of text track.
srclang: Indicates the language of the captions.
Customized Video Controls with Autoplay and Loop
Sometimes, you may want to customize the behavior of the <video> tag. Below is an example:
<video id="custom-video" width="640" height="360" autoplay loop muted>
<source src="custom-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
const video = document.getElementById('custom-video');
video.addEventListener('click', () => {
if (video.paused) {
video.play();
} else {
video.pause();
}
});
</script>
Explanation:
Adds custom click functionality to play/pause the video.
Uses JavaScript for enhanced interactivity.
Best Practices for HTML <video> Elements
Provide Multiple Formats: Ensure compatibility across different browsers by offering multiple video formats.
Fallback Content: Add meaningful fallback text for unsupported browsers.
Keep Accessibility in Mind: Use captions or subtitles for users with hearing impairments.
Optimize Video Size: Compress video files for faster loading times without compromising quality.
Use Poster Attribute: Enhance user experience by displaying a preview image before playback.
Browser Support
The <video> tag is supported in all modern web browsers:
Chrome: Version 4.0 & above
Internet Explorer: Version 9.0 & above
Firefox: Version 3.5 & above
Safari: Version 4.0 & above
Opera: Version 10.5 & above
For older browsers that don't support HTML5 video, you can provide alternate content or fallback inside the <video> tags, such as a link to download the video file.
Frequently Asked Questions
What is the purpose of the <video> tag in HTML?
The <video> tag is used to embed videos into a webpage, allowing users to play videos directly without relying on external plugins.
Which video formats are supported by most browsers?
Common formats include MP4 (H.264), WebM, and Ogg. MP4 is the most widely supported format.
How can I add subtitles to a video?
You can use the <track> element within the <video> tag to add subtitles or captions.
Conclusion
The <video> tag in HTML provides an easy and effective way to incorporate videos into your web pages. From specifying formats and adding controls to customizing behavior with attributes, it offers great flexibility. By following best practices, you can create an engaging and accessible multimedia experience for users.
519+ registered 
