Audio & Video
Overview
Before HTML5, embedding video required clunky, insecure third-party plugins like Adobe Flash. Now, HTML provides native <audio> and <video> tags that are universally supported across all devices. They provide built-in, accessible playback controls, support multiple source formats to ensure cross-browser compatibility, and can be seamlessly manipulated using JavaScript's native Media API.
Syntax
<!-- Standard Video Embed -->
<video width="800" height="450" controls poster="/images/video-thumbnail.jpg">
<!-- Provide multiple formats for cross-browser support -->
<source src="tutorial.mp4" type="video/mp4">
<source src="tutorial.webm" type="video/webm">
<!-- Fallback text for ancient browsers -->
Your browser does not support the video tag.
</video>
<!-- Standard Audio Embed -->
<audio controls>
<source src="podcast-episode.mp3" type="audio/mpeg">
<source src="podcast-episode.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Common Pitfalls
- Using
autoplaywithoutmuted. Modern browsers strictly block auto-playing videos that have sound to prevent annoying the user. If you want a video to autoplay (like a background video banner), you MUST include bothautoplayandmuted. - Forgetting the
controlsattribute. If you don't include it, the video will appear on the screen, but the user will have absolutely no play/pause buttons or volume slider to interact with it.
Interview Questions
poster attribute on a <video> tag?It specifies an image to be shown while the video is downloading, or until the user hits the play button. Without it, the browser displays a blank black box or the first frame of the video, which might be awkwardly blurry.
Real-World Example
Creating a silent, looping, autoplaying background video for a sleek modern hero section.
<!--
Plays automatically, loops infinitely, has no sound,
and plays inline on iOS without taking over the screen.
-->
<video
class="hero-background"
autoplay
loop
muted
playsinline
>
<source src="/assets/hero-bg.mp4" type="video/mp4">
</video>Check Your Knowledge
Test your understanding of Audio & Video with these quick questions.