The HTML <video> tag is used to embed videos directly into a webpage without relying on external plugins like Flash. It is a widely supported and flexible tag that allows users to stream videos, providing control over playback and enabling features like captions, subtitles, and multiple video sources for better compatibility.
Syntax of the <video> Tag
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
In this example, the <video> tag is used to include a video with basic playback controls. The <source> element inside the <video> tag specifies the file location and video format.
Attributes of the <video> Tag
The <video> tag supports a variety of attributes that provide additional functionality and customization options for embedding videos. Here are the most commonly used attributes:
| Attribute | Description |
|---|---|
| src | Specifies the URL of the video file. |
| controls | Adds video controls like play, pause, and volume to the video player. |
| autoplay | Automatically starts playing the video as soon as the page loads. |
| loop | Causes the video to start over again after it finishes playing. |
| muted | Mutes the video by default when it is played. |
| poster | Specifies an image to be shown while the video is loading or before it is played. |
| width and height | Sets the width and height of the video player. |
| preload | Specifies how the video should be loaded when the page loads (options: auto, metadata, or none). |
| crossorigin | Handles cross-origin resource sharing (CORS) requests. |
Examples of HTML <video> Tag
Example 1: Basic Video Player with Controls.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Video Example</title>
</head>
<body>
<h1>HTML Video Example</h1>
<video controls width="600">
<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>
In this example, the video is embedded using the <video> tag with controls enabled, allowing users to play, pause, or adjust the volume. The <source> elements provide multiple video formats for better browser compatibility.
Example 2: Video with Autoplay, Loop, and Poster Image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autoplay and Loop Video</title>
</head>
<body>
<h1>Autoplay and Looping Video Example</h1>
<video autoplay loop muted poster="poster.jpg" width="600">
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
In this example, the video automatically plays, loops after finishing, and displays a poster image before loading. The video is muted by default to avoid auto-play sound.
FAQs About HTML <video> Tag
Q1: What is the purpose of the HTML <video> tag?
A: The <video> tag allows web developers to embed videos directly into webpages without relying on external plugins. It provides users with native video playback features like play, pause, and volume control.
Q2: Can I use multiple video formats within the <video> tag?
A: Yes, you can use multiple <source> elements within the <video> tag to provide different formats (e.g., MP4, WebM, Ogg) for better browser compatibility.
Q3: Does the <video> tag improve SEO?
A: Yes, using the <video> tag along with proper alt text, captions, and structured data can improve your site's SEO by making multimedia content more accessible to search engines.
Q4: What happens if the browser doesn’t support the <video> tag?
A: If the browser does not support the <video> tag, the text provided inside the <video> tag (e.g., "Your browser does not support the video tag") will be displayed to the user as a fallback.
Q5: Can the <video> tag handle subtitles?
A: Yes, the <video> tag supports the <track> element, which allows you to add subtitles or captions to the video for improved accessibility.
