Alternative sources
Provide different media formats with <source> and the type attribute.
The source element
Different browsers support different media formats. With a single src some users cannot open the video. The fix is to offer multiple sources with the <source> element.
Inside audio or video you place several source elements in a row. The browser picks the first one it supports and ignores the rest. So putting the more efficient format (usually webm) first and the more compatible fallback (mp4) after is a good habit.
The type attribute
Adding the type attribute to each <source> helps the browser. type tells the file format with a MIME type, such as type="video/mp4" or type="audio/ogg".
Without type the browser downloads part of the file to find out what it is; with type it can skip that and decide faster. That is why adding type to every source is good practice.
Exercise Add a video with multiple sources
The <video> in body already has controls. Inside it, place at least two <source> elements; write src and type on each.
Show example solution
<body>
<video controls>
<source src="https://example.com/film/trailer.mp4" type="video/mp4">
<source src="https://example.com/film/trailer.webm" type="video/webm">
</video>
</body>Test yourself
-
Why use multiple source elements?
- To make the video load faster
- To cover the formats supported by different browsers
- To add subtitles
- To autoplay the video
Show answer
To cover the formats supported by different browsers — Correct. Multiple sources offer different formats; the browser picks what it supports.
-
Write the type value for the source element
<source src="https://example.com/film/trailer.mp4" type="____">Show answer
<source src="https://example.com/film/trailer.mp4" type="video/mp4"> -
Match format to MIME
- video/mp4
- MP4 video
- video/webm
- WebM video
- audio/mpeg
- MP3 audio
- audio/ogg
- Ogg audio