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.
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>
- 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>tags, (Video is not supported by your we browser) will only be displayed on the browser that do not support the
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.