HTML Video - Fullstackadda

What is HTML Video tag

The HTML <video> tag is used to embed video files on a web page. It can be used to play a variety of video formats such as MP4, OGG, and WEBM. The <video> tag supports various attributes, such as src (to specify the source of the video file), controls (to display the default video player controls), and loop (to loop the video file continuously). Additionally, it has some attributes like width and height that are used to set the size of the video, poster to set an image as a placeholder before the video starts playing. An example of an <video> tag is:

<video src="example.mp4" controls width="320" height="240"></video>

This will embed a video file called “example.mp4” with a width of 320 pixels and a height of 240 pixels, and display the default video player controls on the web page.

Currently, there are three video formats supported for HTML video tag:

mp4
webM
ogg

Video Tag Example

<!DOCTYPE>
<html>

<body>
    <video controls>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the html video tag.
    </video>
    <p>
        Video courtesy of
        <a href="https://www.pexels.com/" target="_blank">Pexels</a>.
    </p>
</body>

</html>

Output

Video

Here is a table that compares the HTML <audio> tag and the <video> tag:

Feature	`<audio>` Tag	`<video>` Tag
Purpose	Embed audio files	Embed video files
Supported file formats	MP3, OGG, WAV	MP4, OGG, WEBM
Default player controls	Available	Available
Autoplay	Supported	Supported
Loop	Supported	Supported
Width and Height	Not supported	Supported
Poster Image	Not supported	Supported

It is worth mentioning that <audio> and <video> tags both support the src, controls, autoplay, loop, muted, preload attributes, and some events like onplay, onpause, onended and onvolumechange .

It’s also worth noting that the <audio> tag is used for audio only, while the <video> tag can include both audio and video.

Video Tag Attributes

Let’s see the list of HTML 5 video tag attributes.

Attribute	Description
controls	It defines the video controls which is displayed with play/pause buttons.
height	It is used to set the height of the video player.
width	It is used to set the width of the video player.
—–	———————–
autoplay	It specifies that the video will start playing as soon as it is ready.
loop	It specifies that the video file will start over again, every time when it is completed.
muted	It is used to mute the video output.
preload	It specifies the author view to upload video file when the page loads.
src	It specifies the source URL of the video file.

The HTML <video> tag is used to embed video files on a web page.
The <video> tag supports various attributes, such as src (to specify the source of the video file), controls (to display the default video player controls), and loop (to loop the video file continuously).