HTML Video

A video on a Web page will be shown through the HTML video element.

Use the video element to display an HTML video:

Example

<video width="400" controls>
  <source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4" />
  Sorry, your browser doesn't support embedded videos!
</video>
<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

Result of the above code is:

Here we are providing 3 different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser.

Example

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video width="620" controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
  <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/ElephantsDream/ed_hd.ogv" type="video/ogg">
  <source src="https://archive.org/download/ElephantsDream/ed_hd.avi" type="video/avi">
  Your browser doesn't support HTML5 video tag.
</video>

Result of the above code is:

Video controls such as play, pause, and volume, are added with the controls property.

Always include width and height properties in your code. The website may flicker while the video loads if the height and width are not specified.

You may use the source element to specify other video files for the browser to pick from. The browser will use the first format it recognizes.

Only browsers that do not support the video element will see the text between the video and /video tags.

Use the autoplay element to start a video automatically. In most circumstances, Chromium browsers do not support autoplay, Muted autoplay, on the other hand, is always permitted.

Add muted to allow the video to play automatically after auto playback (but muted):

Example

<video width="400" controls>
  <source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4" />
  Sorry, your browser doesn't support embedded videos!
</video>
<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

Result of the above code is:

For the video element, the HTML DOM sets methods, attributes, and events.

You may load, play, and break videos and control duration and volume.

DOM events may also tell you whenever a video starts playing, stops, and so on.