html

Video tag in HTML | Explained

Adding videos on the websites can be an engaging way to express your thoughts and therefore videos can attract more viewers. Using videos one can deliver some complicated concepts in a very easy and effective way. So, HTML provides a <video> tag to embed a video on the websites, a <video> tag can have multiple attributes to control the behavior of any video.

This write-up will present a detailed understanding of the following concepts:

  • Syntax of <video> tag
  • Attributes of <video> tag
  • Browser’s Support and Video Formats
  • How to use <video> tag in HTML

Syntax

The below-given snippet shows the basic syntax of <video> tag.

Attributes

  • controls: used to display the control options to the user e.g. play, pause, mute, etc.
  • src: determines the URL
  • loop: video will be played in a loop i.e. again and again.
  • muted: initially, the video will be muted
  • preload: specify the author’s view about how the video will be loaded when the webpage loads
  • autoplay: video will be played automatically
  • height: used to specify the video’s height
  • width: used to specify the video’s width
  • poster: used to show an image during video downloading.

Browser’s Support and Video Formats

<video> tag has three formats i.e. mp4, webM, ogg and these formats will be specified within the source element of the “type” attribute. Chrome, Microsoft Edge, Opera, and Mozilla Firefox support all three video formats while safari and internet explorer support only mp4 format.

Multiple formats can be utilized in the <video> tag so it is a good practice to specify two formats (Ogg and mp4) in the video tag so that the video will be played on most browsers. The browser will use the first recognized video format. If the browser doesn’t recognize any of the specified file formats then the text written within the starting and ending <video> tag will be displayed.

How to use <video> tag in HTML

In HTML <video> tag, multiple attributes can be used to control the behavior of <video> tag such as “controls” enable the visibility of the controls i.e. play, pause, etc. The following piece of code elaborates how to use the <video> tag in HTML:

<html>

<body>

<video controls width="200" height="200" autoplay muted>

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

Video format not supported

</video>

</body>

</html>

The above-given snippet displays the following output:

Controls are visible, video is muted, it verifies that all the attributes are working perfectly.

Example

Now we will modify the above code to test the working of the poster attribute:

<body>

<video controls poster="cover1.jpg" width="200" height="200" muted>

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

Video format not supported

</video>

</body>

Now an image will be displayed on the video until we didn’t click on the play button:

Similarly, you can test the working of remaining attributes.

Conclusion

<video> tag can be used to add a video on a website, different attributes can be used within the video tag to perform different functionalities e.g. poster shows a picture until someone clicks on the video, autoplay enables a video to play automatically and so on. This article demonstrates what is HTML <vedio> tag and how to use <vedio> tag. Moreover, it provides a detailed explanation of the available video formats and browsers support.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.