HTML Video Element

In HTML, the <video> element is used to display a video on a web page.

At present, there are three video formats that are supported for HTML <video> Element. These are: mp4, WebM, Ogg.

In the below table let’s see which browser supports the video file format.

Browser	mp4	WebM	Ogg
Chrome	Yes	Yes	Yes
Edge	Yes	Yes	Yes
Firefox	Yes	Yes	Yes
Opera	Yes	Yes	Yes
Safari	Yes	Yes	No
Internet Explorer	Yes	No	No

The HTML `<video>` Element

In an Example below I will write a short code to show you how you can use the video element:

<!DOCTYPE html>
<html>
<head>
 <title>HTML Video</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="#source.mp4" type="video/mp4">
  <source src="#source.ogg" type="video/ogg">
  Video is not supported by your we browser

</video>
</body>
</html>

Code Explanation

It’s not mandatory to set width and height attributes. But it’s good idea to include them.
The attribute controls adds video controls, like play, pause and volume.
Inside the <video> element, we have add two <source> elements, this is because if the browser doesn’t support the first video file format (mp4) it will support the second one (ogg).
The src attribute is used to specify the video source URL.
The text that we write between the <video> and </video> tags, (Video is not supported by your we browser) will only be displayed on the browser that do not support the <video> element.

Other Attributes that we can use with the video tag are:

autoplay:- It tells the browser to quickly start playing the video as soon as the user visits the page.
loop:- It tells the browser to automatically loop the video, that is playback the video.
muted:- It mutes the audio from the video until the user didn’t unmute it.

Next

Related Posts

Images in HTML

HTML Canvas

HTML Audio

HTML Video Element – crus4