The HTML <video> element is the standard way to embed video content or movies directly into your web pages without needing external plugins.
To display a video, you use the <video> tag combined with the <source> tag.
Your browser does not support the video tag.
</video>controls: Adds buttons for Play, Pause, and Volume.
width & height: Always define these to prevent the page layout from "flickering" or jumping while the video loads.
<source>: Allows you to list multiple formats. The browser will automatically play the first one it supports.
Fallback Text: The text "Your browser does not support..." only appears if the user is using a very old browser.
You can make a video start automatically using the autoplay attribute.
Important Note: Most modern browsers (like Chrome and Edge) block autoplay with sound to improve user experience. To guarantee a video autoplays, you must add the muted attribute
There are three main formats supported by the HTML standard: MP4, WebM, and Ogg.
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Chrome / Edge | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
| Opera | Yes | Yes | Yes |
MP4: video/mp4
WebM video/webm
Ogg: video/ogg
The HTML DOM provides methods and properties that allow you to control the video player using JavaScript. You can create your own custom "Play" or "Pause" buttons.
Methods: play(), pause(), load()
Properties: duration, volume, paused, currentTime
| Tag | Description |
|---|---|
| <video> | Defines a video or movie container. |
| <source> | Defines multiple media resources for <video> and <audio> |
| <track> | Used for subtitles, caption files, or other text tracks. |