Detailed explanation
HTML provides <audio> and <video> elements for embedding media without plugins. Add the boolean controls attribute to request the browser’s built-in playback interface, usually including play/pause, seeking, and volume controls. Video controls may also offer fullscreen or picture-in-picture, depending on the browser. These native controls are the simplest starting point because you do not need JavaScript to implement basic playback. Importantly, controls="false" still enables controls: a boolean attribute is enabled by its presence, so remove it to disable native controls.
Place multiple <source> elements inside the media element to offer alternative encodings of the same content. For example: <video controls width="400" poster="thumb.jpg"><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm">Your browser does not support embedded video. <a href="movie.mp4">Download the video</a>.</video>. Audio follows the same pattern: <audio controls><source src="sound.mp3" type="audio/mpeg"><source src="sound.ogg" type="audio/ogg">Your browser does not support embedded audio.</audio>. The browser evaluates sources in order and attempts to use a supported candidate. The type attribute helps it reject unsupported formats without first downloading them. Actual compatibility depends on both the container, such as MP4, and the codecs used inside it.
Fallback content and playback controls solve different problems. Text or links inside <audio> or <video> are fallback content for browsers that do not support the element; they are not replacement controls. A modern browser that supports <video> but cannot play any supplied source does not normally display that nested fallback text. To keep an alternative available even when playback fails, place a download link or transcript link outside the element. More advanced interfaces can handle media error events with JavaScript and display a useful message.
For video, poster specifies a preview image, while width sets the displayed width rather than changing the file itself. Add captions through a <track kind="captions"> element using a WebVTT file, and provide transcripts where appropriate. Avoid relying on autoplay because browsers commonly restrict it, especially with sound. Interviewers mainly look for correct semantic elements, native controls, sensible format alternatives, and a precise explanation of what fallback content actually covers.
Key points to remember
- Use <audio controls> or <video controls> for browser-provided playback controls.
- Provide alternative files through ordered <source> elements with accurate MIME types.
- Check codec support as well as container support when choosing media formats.
- Nested fallback text targets browsers that do not support the media element, not every playback failure.
- Provide accessible alternatives such as captions, transcripts, and an always-visible download link.
Common mistakes candidates make
- Writing controls="false" and expecting native controls to be disabled.
- Assuming nested fallback text appears whenever a media file fails to load or decode.
- Assuming multiple file extensions guarantee compatibility without checking the actual encodings.
Likely follow-up questions
Can I create custom playback controls?
Yes, JavaScript can control playback using methods such as play() and pause(), along with properties such as currentTime and volume. Custom controls must also provide accessible labels, keyboard operation, and playback-state feedback.
What does the preload attribute do?
preload gives the browser a loading hint: none requests no preloading, metadata requests basic media information, and auto permits broader loading. It is only a hint, so browser policies and network conditions can affect actual behaviour.
How do you add captions to a video?
Add a child element such as <track kind="captions" src="captions-en.vtt" srclang="en" label="English"> inside <video>. The WebVTT file supplies timed text, including dialogue and relevant non-speech sounds.
Interview tip: Show a short <video controls> example, then clearly distinguish native controls, alternative sources, and unsupported-browser fallback content.