crus4

crus4

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.

Browsermp4WebMOgg
ChromeYesYesYes
EdgeYesYesYes
Firefox YesYesYes
OperaYesYesYes
SafariYesYesNo
Internet ExplorerYesNoNo

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

Images in HTML

HTML Canvas

HTML Audio

HTML Video Element – crus4

3 thoughts on “HTML Video Element – crus4

Leave a Reply

Your email address will not be published.