What is the <source> tag used for?
Understanding the <source> Tag
The <source> tag in HTML is used inside <audio> and <video> elements to specify multiple media files. This helps provide different formats so that the browser can choose the one it supports.
- 1
It is always used inside
<audio>or<video>elements. - 2
Allows you to provide multiple file formats (e.g., MP4, WebM, Ogg for videos; MP3, OGG, WAV for audio).
- 3
Browsers will pick the first format they support and ignore the rest.
- 4
It uses the
srcattribute to specify the file and thetypeattribute to indicate the media type (likevideo/mp4oraudio/mpeg).
In short: The <source> tag is used to provide different versions of the same media file, ensuring better browser compatibility.
Scenario Questions
0-2 years experience
- 1How would you add a fallback video source for browsers that don't support MP4?
- 2If you place a <source> tag outside of a <video> element, what does the browser do?
- 3Which attribute on <source> tells the browser which file to try first?
2-5 years experience
- 1You notice some users only see a black box instead of your video; debugging shows the <source> tags aren't being considered. What could cause that?
- 2Explain why you might order multiple <source> elements with different codecs inside a <video> tag.
- 3How would you use <source> within a <picture> element to serve different image formats based on browser support?
5-8 years experience
- 1Design a component that streams adaptive‑bitrate video using <source> tags and a CDN. What trade‑offs do you consider for source ordering and fallback?
- 2When serving large media assets, would you prefer multiple <source> tags or a JavaScript player that selects streams? Why?
- 3What are the performance implications of having many <source> elements on a page, and how would you mitigate them at scale?
8+ years experience
- 1Your organization is migrating legacy <embed> video implementations to HTML5 <video>/<source>. What architectural steps and cross‑team coordination would you plan for a smooth transition?
- 2How would you establish a company‑wide strategy for media format support using <source> tags to balance future‑proofing and current browser market share?
- 3If you need to support progressive enhancement for a global audience with varying bandwidth, how would you structure <source> tags and related infrastructure across services?
Follow-up Questions
- Can you walk me through how the browser selects a source?
- What happens if none of the sources are supported?
- How does the type attribute affect loading behavior?