How do you make media fallback for unsupported browsers?
Making Media Fallback Work in HTML
In HTML, when embedding media with <video> or <audio>, you can provide fallback content that appears if the browser does not support the element or the provided file formats.
- 1
Use multiple
<source>elements to supply different formats (e.g., MP4, WebM, Ogg for video; MP3, OGG, WAV for audio). - 2
Add text inside the
<video>or<audio>tags — this text is displayed when the media cannot be played. - 3
Include a download link so users can access the file even if playback fails.
- 4
For very old browsers, you can embed a Flash player or external plugin as an extra fallback (rarely needed today).
In short: Always include multiple formats using <source> and add fallback text or links so users can still access your media if their browser doesn’t support direct playback.
Scenario Questions
0-2 years experience
- 1You need to embed a video on a page that must work in older browsers that don't support the <video> tag. How would you provide a fallback?
- 2If a user on IE9 visits a page with an <audio> element, what markup would you write to ensure they still hear the audio?
- 3What happens if you omit a fallback source for a media element in a browser that doesn't support the format?
2-5 years experience
- 1We have a product page that uses <video> with multiple source formats. Some users report the video never loads in Safari 9. Walk me through how you'd debug and add a fallback.
- 2Explain the trade‑offs between using a Flash fallback versus a JavaScript polyfill for HTML5 video in a mid‑size web app.
- 3Our CDN serves .webm files, but a segment of our audience uses browsers that only support MP4. How would you structure the <source> elements and server headers to handle this gracefully?
5-8 years experience
- 1Design a reusable component library that ensures all media elements have appropriate fallbacks across desktop and mobile browsers, considering performance and maintainability.
- 2How would you architect a fallback strategy for live streaming video that must work in browsers without Media Source Extensions, while keeping latency low?
- 3Discuss how you would monitor and log fallback usage in production to decide when to deprecate older fallback implementations.
8+ years experience
- 1At a platform level, how would you decide whether to keep supporting legacy media fallbacks (e.g., Flash) versus retiring them, given cross‑team dependencies and security concerns?
- 2Describe a migration plan to move a large legacy codebase that relies on Flash fallbacks to a modern HTML5‑only approach, ensuring minimal disruption to downstream teams.
- 3What governance processes would you put in place to standardize media fallback policies across multiple product squads in a large organization?
Follow-up Questions
- Can you show the exact markup you would use for a video with both MP4 and WebM sources?
- How would you verify that the fallback is triggered in a given browser?
- What metrics would you collect to decide when a fallback can be retired?