HTML Video Tag

Whether it’s a demo of any product, a tutorial, or a background clip, video helps to deliver content in a more interactive way. HTML has the <video> tag, which makes it simple to add videos to your websites. In this blog, you will learn all about the <video> tag in HTML and best practices to follow while using the video tag in your code.

Table of Contents:

• The <video> Tag in HTML
• What is the <source> Tag?
• Making a Responsive Video Element:
• Common Attributes
• Browser Compatibility
• Best Practices
• Common Mistakes to Avoid
• Conclusion

The <video> Tag in HTML

The <video> tag was introduced in HTML5 and is used to add videos directly into the webpage. If you are using this <video> tag for adding video inside the webpage, then you don’t need to install any additional plugins. It can give you built-in playback control, also like play, pause, and volume adjustment. Here is the syntax of writing a video tag in HTML:

Syntax:

<video src=" " controls></video>

The video tag in HTML tells the browser to display a video player that plays the video available at the link given in the src attribute.

What is the <source> Tag?

All browsers don’t support the same video format. To make sure that the video works across different browsers, you can use multiple <source> elements inside your <video> tag.

Syntax:

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg"
    Your browser does not support the video tag.
</video>

Explanation: 

• <video>: This is the main tag. When the browser encounters the video tag then it creates a video player.
• controls: This is responsible for adding default video controls like play, pause, volume, and many more.
• <source>: This allows you to add multiple video file formats.
• Fallback Text: This message will be shown only if the user’s browser doesn’t support the <video> tag.

Launch Your Dream Career with Web Development Skills

Learn Web Dev Today

Explore Program

Making a Responsive Video Element

Making a responsive video element helps you to improve user experience, when users see the video, it looks good on all screens (Mobile, Laptop, Tablet).

Example:

Explanation: In this example, a responsive video element is created using the <video> tag in HTML. The controls attribute enables built-in playback controls like play, pause, and volume. The poster attribute is used to display the poster.jpg image before the video starts playing. The loading=”lazy” attribute is used to loading of the video until the video element does not lie in the current screen/viewport of the user.

Tip:

• Now, modern browsers support lots of video formats like MP4, WebM, and many more, but MP4 is the most recommended for developers. Always try to upload videos in MP4 format.
  
• It is good to add captions and subtitles in the video by using the <track> tag in HTML. 

Syntax:

<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">

Here, subtitles.vtt is the path to the subtitle file.

Common Attributes

Attributes are used to provide extra information about elements in HTML. It is always placed in the opening tag, never put inside the closing tag. Here is a list of some common attributes that are used with the <video> tag:

Important Note:

Modern browsers that are used now require videos to be muted in order for autoplay to work. So if you want that autoplay to work in your browser, then you have to add the muted attribute also.

Browser Compatibility

The HTML <video> tag and common video formats are supported by all modern browsers. However, some video formats are not supported by some common browsers. Let’s understand this with a table:

Best Practices

If you are using the video element for placing video inside the webpage, then you need to follow these best practices to avoid errors:

• Some browsers don’t support all types of video formats, then it is good to use multiple formats by using the <source> attribute.
• It is good practice to compress your video to reduce loading time.
• Set a poster image to make the preview more attractive.
• Autoplay only works when the video is muted. Thus, always use autoplay with muted.
• Don’t autoplay videos that have sounds, it can be annoying.

Common Mistakes to Avoid

• Using only one video format on websites.
• Don’t forget to add fallback text (just like alt for <img> tag).
• Don’t use autoplay without the muted.

Conclusion

The HTML <video> tag is a powerful way to add videos to your website. It will reduce the dependency on third-party libraries. The only thing that you do is use the <video> tag and play with controls. It is easy to use and widely supported, and comes with some built-in features.

HTML <video> tag – FAQs