Techie BabajiLearn to Code. Build Real Skills.
HTML · Modern HTML

Audio and Video

Before HTML5 you needed Flash to play a video. Now two elements — <audio> and <video> — do it natively on every device.

Intermediate 5 min Lesson 14 of 22 Runnable examplesFollows the WHATWG HTML Living Standard.
Before you start:Images
0/22 in HTML
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Embed audio and video with native controls
  • Provide multiple formats with <source>
  • Add captions with <track>
  • Understand autoplay rules

Explanation#

<video src="clip.mp4" controls> shows a player with play, pause, volume and full-screen buttons. Without controls, users cannot play it unless you add JavaScript.

Use several <source> elements to offer different formats. The browser plays the first one it supports.

Browsers block autoplay with sound. Autoplay only works if you also add muted — that is why background videos are always silent.

poster="thumb.jpg" shows an image before the video plays. <track kind="captions"> adds subtitles from a .vtt file, which deaf users and people watching without sound rely on.

Syntax#

HTML Illustrative
<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  Your browser does not support video.
</video>

Code example: Video and audio players#

HTMLVideo and audio players Runnable
<style> video { max-width: 100%; height: auto; } </style>


<video controls width="400" preload="metadata"
       poster="https://interactive-examples.mdn.mozilla.net/media/cc0-images/flower.jpg">
  <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 cannot play this video.
</video>


<p>Background-style clip (muted, looping):</p>
<video autoplay muted loop playsinline width="200"
       src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></video>


<audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
Expected output
A video player with a poster image, a small silent looping video and an audio player.
Opens this example in the full playground

Step-by-step explanation#

  1. controls adds the built-in player buttons.
  2. preload="metadata" loads only the duration and size, not the whole file, until play is pressed.
  3. Two <source> tags: WebM first (smaller), MP4 as the fallback.
  4. The text inside <video> only shows in very old browsers.
  5. autoplay + muted + loop + playsinline is the recipe for a silent background video on all devices, including iPhones.
  6. <audio controls> works the same way for sound.

Real-world use case#

Course sites embed lesson videos with captions; product pages use short muted looping clips; podcast pages use <audio>.

Common mistakes#

Expecting autoplay with sound

Browsers block it to protect users. Add muted, or let the user press play.

No captions

Without captions, deaf users and anyone watching on mute miss the content. Add a <track>.

Huge video files

A 200 MB video on a landing page wastes mobile data. Compress it, or host long videos on a streaming service and embed with an iframe.

Best practices#

  • Always include controls for content videos
  • Provide captions for speech
  • Use preload="metadata" or "none" to save bandwidth
  • Respect prefers-reduced-motion for decorative autoplay videos

Remember this#

Autoplay only works when muted — the browser’s “no surprise noise” rule.

Multiple <source>s = “try this, else try that”.

track = subtitles. Captions make video accessible.

Practice exercise#

Your task: Embed the MDN flower video so it shows controls, is 300px wide, has a poster and loads only metadata.

Need a hint?
Use the attributes controls, width, poster and preload.
Show solution
HTML Runnable
<video controls width="300" preload="metadata"
       poster="https://interactive-examples.mdn.mozilla.net/media/cc0-images/flower.jpg"
       src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></video>
Opens this example in the full playground

Mini quiz#

Audio and Video quizMultiple choice Question 1 of 3

Which attribute is required for autoplay to work in modern browsers?

Score so far: 0/0

Want more? Practise all HTML MCQs · HTML interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.