HTML Audio and Video
The <audio> and <video> tags natively embed media without needing third-party plugins like Flash. Both support the controls attribute to show built-in play/pause/volume UI.
Inside <audio> or <video>, multiple <source> tags can provide different file formats, letting the browser choose the one it supports, with fallback text shown for very old browsers.
<video controls><source src="movie.mp4" type="video/mp4"></video>Basic usage
controls shows the native player UI. autoplay starts playback automatically (often blocked by browsers unless muted). loop repeats playback.
Multiple sources
Provide several <source> elements with different formats (like .mp4 and .webm) since browser codec support varies; the browser picks the first one it can play.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>(shows an audio player with play/pause controls)The fallback text only shows in browsers that don't support the audio tag at all.
<video width="320" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>(shows a video player, picking a supported format)Multiple sources maximize cross-browser compatibility.
Key points
- <audio> and <video> embed media without plugins.
- controls shows the browser's built-in playback UI.
- Multiple <source> tags provide format fallbacks.
- autoplay is often blocked unless the media is also muted.