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 Formats
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Video – Media Types
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
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.
