What Is The HTML Video ?

The HTML Video component is utilized to show a video on a site page.

Example

Civility of Big Buck Bunny:

The HTML <video> Element

To show a video in HTML, utilize the <video> element:

Example

<video width=”320″ height=”240″ controls>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

How it Works

The controls characteristic adds video controls, similar to play, interruption, and volume.

It is a smart thought to consistently incorporate width and tallness ascribes. In the event that stature and width are not set, the page may glimmer while the video loads.

The <source> component permits you to indicate elective video records which the program might browse. The program will utilize the primary perceived arrangement.

The content between the <video> and </video> labels may be shown in programs that don’t uphold the video component.

HTML <video> Autoplay

To begin a video consequently, utilize the autoplay quality:

Example

<video width=”320″ height=”240″ autoplay>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add quieted after autoplay to allow your video to begin playing naturally (yet quieted):

Example

<video width=”320″ height=”240″ autoplay muted>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

Browser Support

The numbers in the table indicate the main program form that completely upholds the <video> component

HTML Video

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

BrowserMP4WebMOgg
EdgeYESYESYES
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES
HTML Video

HTML Video – Media Types

File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg
HTML Video

HTML Video – Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are additionally DOM occasions that can inform you when a video starts to play, is stopped, and so on.

Example: Using JavaScript

Play/Pause Big Small Normal

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Video Tags

TagDescription
<video>Defines a video or movie
<source>Defines multiple media resources for media elements, such as <video> and <audio>
<track>Defines text tracks in media players
HTML Video