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
The below-given snippet shows the basic syntax of <video> tag.
- 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:
The above-given snippet displays the following output:
Controls are visible, video is muted, it verifies that all the attributes are working perfectly.
Now we will modify the above code to test the working of the poster attribute:
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.
<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.