HTML can play video and audio without any plugins. The <video> and <audio> elements give you a complete player, with a play button, timeline, volume and full-screen mode, from a single attribute: controls.
Before these elements existed, websites needed add-ons such as Flash to play media, and many phones couldn't play it at all. Today the browser handles everything, which means media works on every device and respects each visitor's settings, such as reduced data usage.
In this lesson you'll learn the attributes that control playback, how to offer more than one file format, and how to add captions.
The video element and its attributes
<video src="trailer.mp4" controls width="640" poster="cover.jpg"></video>controlsshows the player buttons. Without it, visitors have no way to start the video.postersets an image to show before playback starts.widthandheightset the size of the player.preload="metadata"only fetches the length and size of the video until the visitor presses play, which saves data.
The <audio> element works the same way, without the visual attributes: <audio src="episode.mp3" controls></audio>.
Autoplay rules
Browsers block videos that autoplay with sound, because unexpected noise annoys almost everyone. If you need autoplay, for example for a silent background video, you must add muted:
<video src="waves.mp4" autoplay muted loop playsinline></video>loop repeats the video forever, and playsinline stops iPhones from switching to full screen.
Use autoplay with care. Moving video can distract people who are trying to read, and it uses data on mobile connections.
Offering multiple formats with source
Not every browser plays every format. List your options with <source> elements and the browser uses the first one it supports. Text between the tags is only shown by very old browsers that can't play media at all.
| Format | Type |
|---|---|
| MP4 (H.264) | video/mp4, plays in every modern browser |
| WebM | video/webm, often smaller files |
| MP3 | audio/mpeg |
| OGG | audio/ogg |
Adding captions with track
The <track> element adds subtitles or captions from a .vtt (WebVTT) text file:
<video src="lesson.mp4" controls>
<track src="lesson-en.vtt" kind="captions" srclang="en" label="English">
</video>Captions help deaf and hard-of-hearing viewers, people watching in noisy places, and language learners. A .vtt file is plain text listing each line of speech with its start and end time, so you can write one in any text editor.
HTML Video and Audio Syntax
Video with sources and captions
<video controls width="640" poster="cover.jpg">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English">
Your browser does not support video.
</video>HTML Video and Audio Summary
- Use
<video>and<audio>to play media without plugins. - Add
controlsso visitors can start, pause and adjust playback. - Autoplaying video must be
muted; use it sparingly. - List several
<source>formats so every browser can play your media. - Add captions with
<track>and a WebVTT file.
HTML Video and Audio Examples
Each example runs in the page. Edit the code and press Run to see what changes.
A video player
Press play in the result. Then remove controls and run again. Notice there's no way to start it.
<video
controls
width="400"
poster="https://picsum.photos/id/1039/400/225"
preload="metadata">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
Sorry, your browser can't play this video.
</video>Line-by-line explanation
- Line 2
controlsshows play, pause, timeline, volume and fullscreen. - Line 4The poster image shows before the video starts.
- Line 5Only load the video's details until someone presses play.
- Lines 6 to 7Two formats. The browser uses the first one it can play.
- Line 8Fallback text for very old browsers.
An audio player
<p>Listen to the rain:</p>
<audio controls preload="none">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
Your browser doesn't support audio.
</audio>
<p><small>OK, it's actually a T-rex. Surprise!</small></p>Line-by-line explanation
- Line 2
<audio>withcontrolsgives a compact player.preload="none"downloads nothing until play is pressed. - Line 3An MP3 source.
A silent looping background video
<video autoplay muted loop playsinline width="400">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
<p>No controls needed: it's decoration, muted and looping.</p>Line-by-line explanation
- Line 1
autoplayonly works here because the video ismuted.looprepeats it;playsinlinekeeps it in the page on iPhones.
Common HTML Video and Audio Mistakes
Autoplay with sound
<video src="ad.mp4" autoplay></video><video src="ad.mp4" controls></video>
<!-- or, for silent background video: -->
<video src="bg.mp4" autoplay muted loop playsinline></video>Browsers block un-muted autoplay, so the first version just sits there frozen.
Forgetting controls
<video src="lesson.mp4"></video><video src="lesson.mp4" controls></video>Without controls (or your own JavaScript buttons), users can't play the video.
HTML Video and Audio in Real Projects
Self-hosted video vs embeds
For large public videos, most sites embed YouTube or Vimeo with an iframe, because those services handle streaming and heavy traffic. <video> is ideal for short product clips, background loops and videos you don't want adverts on. Online course platforms often use <video> with captions in several languages.
HTML Video and Audio Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Show the player buttons and a cover image.
<video src="cats.mp4" ="cats-cover.jpg" width="480"></video>controls shows the player UI; poster sets the cover image.Which attribute is required for autoplay to work in modern browsers?
Which element adds captions to a video?
<track kind="captions"> loads a WebVTT file.This background video never plays. Make it autoplay correctly, loop, and play inline on phones.
<video autoplay width="300">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>- The video is muted
- The video loops
- The video plays inline
- Still autoplays
HTML Video and Audio Quiz
3 questions to check what you learned.
Which attribute shows play/pause buttons?
- controls
- buttons
- player
- ui
Why list several
<source>elements?- To play them all at once
- So each browser can pick a format it supports
- To make the video longer
- It's required for audio only
What file format do captions for
<track>use?- .txt
- .srt only
- .mp4
- .vtt (WebVTT)
HTML Video and Audio Challenge
Build a podcast player
Create:
- An
<h3>with an episode title - An
<audio>element withcontrolsandpreload="none" - A
<source>withsrc="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"andtype="audio/mpeg"
- An h3 title
- Audio with controls
- preload is none
- A source of type audio/mpeg