🌱BeginnerImages and Media
Audio and Video
Embed media directly in HTML5 with <audio> and <video> elements and their key attributes.
Overview
HTML5 introduced native <audio> and <video> elements that let you embed media directly in a page without Flash or third-party plugins. Browsers handle playback natively.
Both elements support multiple source formats via nested <source> elements the browser picks the first format it can play. Common video formats are MP4 (H.264) and WebM; common audio formats are MP3, OGG, and WAV.
Key shared attributes: controls (shows the playback UI), autoplay, muted, loop, and preload. For video, you also have width, height, and poster (a thumbnail image shown before play).
Key Points
- •<audio> and <video> are HTML5 native media elements no plugins required
- •The controls attribute shows the browser's built-in playback controls
- •Use multiple <source> elements inside the media element for format fallback
- •autoplay requires muted in most browsers unmuted autoplay is blocked to protect users
- •<video poster="thumbnail.jpg"> shows an image before the video plays
- •Always provide a fallback text between the tags for browsers that do not support the element
Examples
Basic audio player
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>The fallback text between tags is shown in very old browsers.
Video player with poster and multiple sources
<video
width="640"
height="360"
controls
poster="thumbnail.jpg"
>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support video.
</video>Autoplaying muted background video (looping)
<video autoplay muted loop playsinline width="100%">
<source src="background.mp4" type="video/mp4">
</video>Browsers require muted for autoplay to work. playsinline prevents iOS fullscreen.
Common Mistakes
- Using autoplay without muted browsers block unmuted autoplay to prevent annoying users
- Providing only one format some browsers prefer WebM over MP4; provide both
- Forgetting controls users cannot interact with the media without this attribute
Note
For video hosted on external platforms (YouTube, Vimeo), use an <iframe> embed instead of <video>. The <video> tag is ideal for self-hosted files.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4