HTML Video

HTML Video

The HTML <video> element provides a standard way to embed and play videos directly in web pages without requiring external plugins.

Playing Videos in HTML

Before HTML5, embedding video often relied on browser plugins like Adobe Flash. The <video> element introduced a native, plugin-free standard.

Browser Support

The <video> element itself is supported by all modern web browsers.

Support for specific video formats varies, which is why providing multiple sources is recommended.

The HTML

To embed a video, use the <video> element. Use <source> elements inside it to specify different video file formats.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Video Example</title>
</head>
<body>

<h1>Example Video</h1>

<video controls width="640" height="360" poster="posterimage.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <!-- Fallback content for older browsers -->
  Your browser does not support the video tag.
  You can <a href="movie.mp4">download the video</a> instead.
</video>

</body>
</html>

How it Works

• <video> element: The container for the video.
• controls attribute: Adds standard video controls (play/pause, volume, fullscreen, timeline).
• width and height attributes: Set the dimensions of the video player. Providing these helps the browser reserve space, preventing layout shifts (CLS) as the video loads. While CSS can also set dimensions, these attributes are beneficial for initial layout.
• poster attribute: Specifies an image to show while the video is downloading or until the user plays it.
• <source> elements: List available video files. The browser chooses the first format it supports.
• src attribute (on <source>): The path to the video file.
• type attribute (on <source>): The MIME type of the video file, helping the browser quickly determine if it can play it.
• Fallback Content: Text or HTML placed between the opening <video> and closing </video> tags (but after any <source> elements) will be displayed only by browsers that do not support the <video> element.

HTML

The autoplay attribute suggests that the video should start playing automatically as soon as possible.

<video controls width="640" height="360" autoplay muted>
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

	Important: Modern browsers have strict autoplay policies to protect users. Autoplay is often blocked unless the video is muted (using the muted attribute) or the user has previously interacted with the site. Always provide user controls (controls) as autoplay might not work.

Other useful attributes include loop (to restart the video automatically when it ends) and preload (auto, metadata, none) to hint how much video data should be preloaded.

HTML Video - Common Formats & Browser Support

The most common video formats used on the web are:

Format (Codec)	Notes & Browser Support	MIME Type
MP4 (H.264 + AAC)	Excellent support across nearly all browsers and devices. H.264 is patent-encumbered, but widely licensed.	video/mp4
WebM (VP9 + Opus/Vorbis)	Royalty-free format, good support in modern browsers (Chrome, Firefox, Edge, Opera). Safari support added more recently.	video/webm
AV1 (with Opus)	Newer, royalty-free codec offering better compression than VP9/H.264. Support is growing rapidly in major browsers.	video/av1 (or within MP4/WebM containers)
Ogg (Theora + Vorbis)	Older royalty-free format, primarily supported by Firefox. Less common now compared to MP4 and WebM.	video/ogg

Recommendation: Provide at least MP4 (H.264) for broad compatibility and WebM (VP9 or AV1) for modern browsers that support royalty-free formats.

HTML Video - Scripting and Accessibility

The <video> element has a rich JavaScript API for controlling playback, volume, seeking, and responding to events (like play, pause, ended, timeupdate).

Example: Custom Play/Pause Button

<video id="myVideo" width="320" height="240" src="my_video.mp4"></video>
<button id="playPauseBtn">Play</button>

<script>
  const video = document.getElementById('myVideo');
  const playPauseBtn = document.getElementById('playPauseBtn');

  playPauseBtn.addEventListener('click', () => {
    if (video.paused || video.ended) {
      video.play();
      playPauseBtn.textContent = 'Pause';
    } else {
      video.pause();
      playPauseBtn.textContent = 'Play';
    }
  });

  // Update button text when video ends or is paused by controls
  video.addEventListener('pause', () => { playPauseBtn.textContent = 'Play'; });
  video.addEventListener('play', () => { playPauseBtn.textContent = 'Pause'; });
</script>

For accessibility, use the <track> element to provide subtitles, captions, descriptions, or chapters.

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Español">
  Your browser does not support the video tag.
</video>

Refer to MDN Web Docs for a full DOM reference for the <video> element.

HTML Video Related Tags

Tag	Description
	Defines the video player container.
	Specifies multiple media resources (different formats or resolutions) for the <video> element.
	Defines timed text tracks (subtitles, captions, descriptions) for the media element.