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.
Related Posts
HTML Video Element – crus4
3 thoughts on “HTML Video Element – crus4”