What video formats supported in html

HtmlHow-ToBeginner · 4 min read

HTML Video Formats Supported: Quick Guide for Web Developers

HTML supports video playback using the <video> element. The most commonly supported video formats are MP4 (H.264 codec), WebM (VP8/VP9 codec), and Ogg (Theora codec). Using multiple formats ensures your video works across all modern browsers.

📐

Syntax

The <video> element is used to embed videos in HTML. Inside it, you use one or more <source> tags to specify video files in different formats. The browser picks the first format it supports.

<video controls>: Adds video controls like play, pause, and volume.
<source src="file" type="video/format">: Specifies the video file and its format.
Fallback text inside <video> shows if the browser can't play any video.

html

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

Output

A video player with controls visible, playing the first supported video format.

💻

Example

This example shows how to embed a video with multiple formats to ensure it plays on all browsers. The browser will use the first supported format it finds.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Video Formats Example</title>
</head>
<body>
  <h1>Sample Video</h1>
  <video controls width="480">
    <source src="sample-video.mp4" type="video/mp4">
    <source src="sample-video.webm" type="video/webm">
    <source src="sample-video.ogv" type="video/ogg">
    Sorry, your browser does not support embedded videos.
  </video>
</body>
</html>

Output

A webpage with a heading 'Sample Video' and a video player with controls that plays the video in the best supported format.

⚠️

Common Pitfalls

Common mistakes when using video formats in HTML include:

Using only one video format, which may not work in all browsers.
Not specifying the correct type attribute in the <source> tag.
Forgetting to add controls attribute, leaving users without play/pause buttons.
Using unsupported or uncommon codecs inside the video files.

Always test your videos in multiple browsers to ensure compatibility.

html

<!-- Wrong way: Only one format and no controls -->
<video>
  <source src="video.avi" type="video/avi">
</video>

<!-- Right way: Multiple formats and controls -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Output

The first snippet shows a video with no controls and likely no playback; the second snippet shows a video player with controls and multiple formats.

📊

Quick Reference

Video Format	File Extension	Common Codec	Browser Support
MP4	.mp4	H.264	Supported by all major browsers
WebM	.webm	VP8/VP9	Supported by Chrome, Firefox, Edge, Opera, Safari (from version 14.1)
Ogg	.ogv	Theora	Supported by Firefox, Chrome, Opera
AVI	.avi	Varies	Not supported in HTML5 video
MOV	.mov	Varies	Not supported in HTML5 video

✅

Key Takeaways

Use the <video> element with multiple <source> formats for best browser support.

MP4 (H.264), WebM (VP8/VP9), and Ogg (Theora) are the main supported video formats in HTML.

Always include the controls attribute so users can play and pause the video.

Test your videos in different browsers to ensure they play correctly.

Avoid unsupported formats like AVI or MOV inside the HTML5 <video> element.