HTML Multimedia
Learn the HTML multimedia tags and the audio and video formats browsers support, plus how to serve multiple sources, add captions, and handle autoplay.
Multimedia is almost anything you can hear or see (e.g. sound, music, images, recordings, videos, films, animations, etc.). It comes in different formats. Web pages can contain multimedia elements of different formats and types.
This chapter gives you an overview of the HTML tags that embed media, the audio and video formats browsers actually support, and the practical patterns you need: serving multiple formats with <source>, adding captions for accessibility, and handling autoplay correctly.
Multimedia Tags
HTML allows adding different multimedia files on your website by various multimedia tags. These tags include:
<audio>for playing an audio file on the web page,<video>for playing a video file on the web page,<source>for offering several media files so the browser can pick one it supports,<track>for adding captions or subtitles to a<video>or<audio>element,<embed>for embedding external content (most commonly PDFs) on the web page,<object>for embedding external resources — a largely legacy tag today,<iframe>for embedding other web pages.
Here is a basic example using the controls attribute and <source> tags:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>The text between the opening and closing tags ("Your browser does not support…") is fallback content. It is shown only if the browser cannot play the element at all.
Why Use Multiple <source> Elements
No single audio or video format is supported by every browser. To cover them all, you list several <source> elements inside one <audio> or <video> element. The browser walks the list from top to bottom and uses the first source whose format it can play, ignoring the rest. So put your most-preferred format first.
A video that works across browsers usually offers both MP4 (broadest support, including Safari) and WebM (free, open, well supported in Chrome and Firefox):
<video width="640" height="360" controls poster="preview.jpg" preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video element.
</video>The type attribute lets the browser skip a format it does not support without downloading the file first, so always include it.
An audio element follows the same pattern. MP3 plays everywhere; Ogg is a free alternative supported by Chrome and Firefox:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Captions and Accessibility
Use the <track> element to add captions or subtitles to a video. Captions make your content usable for deaf and hard-of-hearing viewers, and they help anyone watching with the sound off. The kind="captions" track points to a WebVTT (.vtt) file:
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video element.
</video>Autoplay, Poster, and Preload
A few <video> attributes are worth knowing:
autoplay— starts playback automatically. Modern browsers block autoplay with sound, so a clip will only autoplay if it is alsomuted:<video autoplay muted>.poster— an image shown before the video plays (a placeholder frame).preload— hints how much to buffer up front:none,metadata(just duration and dimensions), orauto(the browser may load the whole file).
Embedding Other Content: <object> and <embed>
Two older tags can embed external resources. Today their role is narrow:
<object>was a general-purpose container for plugins and external files. It is largely legacy now — for ordinary video and audio you should use<video>and<audio>instead.<embed>embeds external content too, but in modern pages it is mostly used to display PDFs.
<embed src="document.pdf" type="application/pdf" width="600" height="400">Multimedia Formats
Multimedia elements such as audio or video are stored in media files. You can discover the file type by looking at the file extension.
Common multimedia extensions include .mp3, .mp4, .webm, .ogg, .wav, .mpg, .wmv, and .avi. (You may still encounter .swf Flash files, but Flash is obsolete — it was removed from all browsers in 2020.)
Audio Formats
The newest format for compressed recorded music is MP3. This term is synonymous with digital music.
MP3 is a good choice if your website is about recorded music.
| Format | File | Description |
|---|---|---|
| MIDI (Musical Instrument Digital Interface). | .mid .midi | This is the main format for all electronic music devices (e.g. synthesizers and PC sound cards). MIDI files contain digital notes that can be played by electronics, but they do not include sound. It plays well on music hardware and computers, but not natively in web browsers. Modern browsers can handle MIDI via the Web Audio API. |
| RealAudio | .rm .ram | Allows streaming of audio with low bandwidths. In web browsers, it does not play. |
| WMA | .wma | This format has been developed by Microsoft and is usually used in music players. It plays well on Windows computers, but not in web browsers. |
| AAC | .aac | This format has been developed by Apple as the default format for iTunes. Raw .aac files have limited browser support, but AAC audio is widely supported when packaged inside .mp4 containers. |
| WAV | .wav | This format has been developed by IBM and Microsoft. It plays well on Windows, Linux, and Macintosh operating systems. Supported by HTML5. |
| Ogg | .ogg | This format has been developed by the Xiph.Org Foundation. Supported by HTML5. |
| MP3 | .mp3 | This is the most popular format for music players. The format has good compression (small files) and high quality. Supported by all browsers. |
| MP4 | .mp4 | This is a video format but can be used for audio as well. MP4 video is the future video format on the internet leading to automatic support for MP4 audio by all browsers. |
A container (like .mp4 or .ogg) is the file wrapper; the codec (like AAC, MP3, or Vorbis) is how the audio inside is encoded. Browsers care about both. In practice, for the web you can rely on MP3 (every browser) and Ogg (Chrome and Firefox). AAC audio is broadly supported when it is delivered inside an .mp4 container.
Video Formats
| Format | File | Description |
|---|---|---|
| MPEG | .mpg .mpeg | Created by the Moving Pictures Expert Group. It is the first popular video format on the web. Not supported in HTML5. |
| AVI (Audio Video Interleave) | .avi | Created by Microsoft. It is normally used in TV hardware and video cameras. It plays well on Windows computers, but not in web browsers. |
| WMV (Windows Media Video) | .wmv | Created by Microsoft. It is normally used in TV hardware and video cameras. It plays well on Windows computers, but not in web browsers. |
| QuickTime | .mov | Created by Apple. It is normally used in TV hardware and video cameras. It plays well on Apple computers, but not in web browsers. |
| RealVideo | .rm .ram | Created by Real Media and allows video streaming with low bandwidths. It is still used for Internet TV and online video but does not play in web browsers. |
| Flash | .swf .flv | Deprecated. Adobe Flash Player was removed from all modern browsers in 2020. This format is now considered legacy and requires third-party emulators to play. |
| Ogg Theora | .ogg | Created by the Xiph.Org Foundation. Supported by HTML5. |
| WebM | .webm | Created by Mozilla, Opera, Google, and Adobe. Supported by HTML5. |
| MPEG-4 or MP4 | .mp4 | Created by the Moving Pictures Expert Group. It is generally used in TV hardware and newer video cameras. Recommended by YouTube. Supported by all HTML5 browsers. |
For HTML5 <video>, stick to MP4 (H.264 video + AAC audio — works everywhere, including Safari), WebM, and Ogg (both supported in Chrome and Firefox). MP4 plus WebM <source> elements together cover essentially all modern browsers.
Browser Support
Audio and video are played natively by all modern browsers — no third-party plugins required. Support is not identical across formats, which is exactly why you offer multiple <source> elements:
- Audio — MP3 and AAC (in
.mp4) work in every major browser, including Safari. Ogg/Vorbis works in Chrome and Firefox but not Safari. - Video — MP4 (H.264) works everywhere, including Safari. WebM and Ogg/Theora work in Chrome and Firefox.
The safe, widely-used combination is MP4 + WebM for video and MP3 + Ogg for audio.