In this HTML tutorial article, we will understand in detail about the HTML `<video>` tag. You will get to know about:
* What is the `<video>` tag?
* Why and how is it used?
* What are its important properties?
* A practical example of the `<video>` tag
* How does this tag help in SEO (Search Engine Optimization)?
* And finally, there will be a small Summary (Conclusion) as well.
This article is for all those who are learning HTML or are a beginner web developer. So let's get started without delay.
What is the video tag?
The HTML `<video>` tag is a tag that allows us to display a video file on our website or web page. That is, if you want a user to see a video on your website - such as a promo video, tutorial or background video - then the `<video>` tag is used for that.
This tag was introduced in HTML5, earlier Flash player was used to display videos on web pages, but now it is outdated.
What is the video tag?
The HTML `<video>` tag is a tag that allows us to display a video file on our website or web page. That is, if you want a user to see a video on your website - such as a promo video, tutorial or background video - then the `<video>` tag is used for that.
This tag was introduced in HTML5, earlier Flash player was used to display videos on web pages, but now it is outdated.
What is the video tag?
If you want to embed a video in your website - i.e. display the video directly on the web page without using YouTube or any external source - then the `<video>` tag is used. This allows the user to view the video without any third-party plugins.
How to use the video tag?
The syntax of the `<video>` tag in HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Player</title>
</head>
<body>
<h1>Watch the Video Below</h1>
<video controls width="640" height="360">
<source src="video-file.mp4" type="video/mp4">
Your browser is not capable of viewing the video.
</video>
</body>
</html>
Here:
* `<video>` is a container tag.
* The path of the video file is given inside the `<source>` tag.
* The `controls` attribute shows buttons like play/pause, volume, etc.
About all important attributes
There are various attributes inside the `<video>` tag that control the functionality and presentation of the video. Let's understand each one by one:
1. `src`
This is the path of the video file. If you are not using the `<source>` tag, you can also provide the `src' attribute directly.
<video src='movie.mp4' controls></video>
2. `controls`
This shows the controls of the video player (play, pause, volume, fullscreen). If you don't show this attribute, users will not be able to control the video.
3. `autoplay`
This attribute starts the video automatically as soon as the page loads.
<video src='sample.mp4' autoplay></video>
4. `loop`
This will repeat the video until the user stops it.
<video src='sample.mp4' loop></video>
5. `muted`
This mutes the video (without sound). This feature is very useful with autoplay.
6. `poster`
If you want an image thumbnail to appear before the video starts, use the 'poster' attribute.
<video src='video.mp4' poster='thumbnail.jpg' controls></video>
7. `width` and `height`
With these you can set the size of the video.
<video width='640' height='360' controls></video>
8. `preload`
This tells the browser how much of the video file to preload when the page loads. It has teeny values:
* `auto` - preload as much as possible
* `metadata` - preload only the metadata of the file (like duration)
* `none` - don't preload anything
Video tag example
Let's look at a simple and complete example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Example</title>
</head>
<body>
<h2>My video:</h2>
<video width="640" height="360" controls poster="preview.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>
Here we have:
* What formats are provided (MP4 and OGG) - for compatibility.
* Set a `poster` image.
* Enabled `controls`.
How does it help in SEO?
When you use `<video>` tag in your website, it also helps you in SEO (Search Engine Optimization) How? Let's understand:
1. User Engagement - Users who watch videos spend more time on the website, which signals search engines that your content is valuable.
2. Indexing - If you provide proper `title`, `description`, and `caption` with the video, then search engines understand and index your video content.
3. Rich Snippets - You can represent video content to structured data (Schema.org markup), which can allow Google to show your video with thumbnail in search results.
4. Mobile Friendly Content - The HTML5 video tag works well for responsive websites, making your content accessible to mobile users as well.
Tip: Videos don't come with alt text, but you can add subtitles or captions using the `<track>` tag - which also increases accessibility and improves SEO.
Conclusion
The HTML `<video>` tag is a very useful element that makes any modern website dynamic and attractive. This tag allows you to embed videos directly into your web page without any external plugins.
In this article, you learned:
1. What is the `<video>` tag and how it is used
2. What are its important properties like `controls`, `autoplay`, `poster`, `loop`, etc.
3. An example that you can apply in a real project.
4. And it also helps in SEO.
If you are a beginner, the `<video>` tag is an easy and powerful tool that you can use to take your HTML skills to the next level. Keep practicing, and keep exploring new properties and attributes.