The source Element for Multiple Formats
Provide fallback formats with the source element.
Why Multiple Formats?
Different browsers support different audio/video codecs:
- WebM (VP9/VP8) — Chrome, Firefox, Edge (not Safari)
- MP4 (H.264) — all browsers (universal)
- OGG — Firefox, Chrome (not Safari)
- OPUS — Chrome, Firefox, Edge (not Safari)
The <source> element lets you provide multiple formats for fallback.
source Inside audio
Provide multiple audio formats:
<audio controls>
<!-- Browser picks the first format it supports: -->
<source src="podcast.opus" type="audio/ogg; codecs=opus">
<source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
<source src="podcast.mp3" type="audio/mpeg">
<!-- Fallback text if none supported: -->
<p>Download: <a href="podcast.mp3">podcast.mp3</a></p>
</audio>All lessons in this course
- The audio Element src controls loop autoplay
- The video Element and Aspect Ratio
- The source Element for Multiple Formats
- Subtitles with track and WebVTT