What tags are used to embed videos and audios?
Embedding Video and Audio in HTML
In HTML, you can embed multimedia using the <video> and <audio> elements. These allow you to play video and audio directly in the browser without external plugins.
- 1
The
<video>tag is used for embedding video files. - 2
Supports attributes like
controls,autoplay,loop,muted, andposter. - 3
Formats commonly supported: MP4, WebM, and Ogg.
- 4
You can provide multiple formats using
<source>for better browser compatibility.
- 1
The
<audio>tag is used for embedding audio files. - 2
Supports attributes like
controls,autoplay,loop, andmuted. - 3
Formats commonly supported: MP3, OGG, and WAV.
- 4
You can provide multiple formats using
<source>just like with<video>.
In short: Use <video> to embed videos and <audio> to embed sounds or music directly in your web pages.
Scenario Questions
0-2 years experience
- 1How would you embed an MP4 video on a product page using HTML, and what fallback would you provide for browsers that don't support the <video> tag?
- 2If you need a short audio clip that plays when a user clicks a button, which element would you use and what attributes are required to start playback automatically?
- 3What happens if you omit the closing tag for <audio> in a simple page?
2-5 years experience
- 1You added a <video> element, but on Safari the controls are missing. Walk me through how you'd debug this and which attributes might be the cause.
- 2Explain the trade‑offs between using the native <audio> tag versus a JavaScript library for a custom UI, especially regarding mobile browsers and autoplay policies.
- 3Our product must support both .mp4 and .webm formats. How would you structure the <video> markup to maximize compatibility, and what fallback content would you include?
5-8 years experience
- 1Our site streams dozens of videos simultaneously and we see high bandwidth usage. How would you redesign the HTML media embedding strategy to improve performance at scale?
- 2Discuss how you would implement lazy loading for <video> and <audio> elements while preserving SEO and accessibility.
- 3We need to add DRM‑protected content. How does the choice of <video> attributes and Media Source Extensions affect the architecture of our streaming pipeline?
8+ years experience
- 1We are migrating a legacy site that uses <embed> and <object> for media to modern <video>/<audio>. What architectural considerations, cross‑team coordination, and backward‑compatibility strategies would you propose?
- 2How would you set up a company‑wide guideline for media embedding that balances developer experience, performance, accessibility, and future‑proofing across multiple product lines?
- 3If we need to serve region‑specific codecs via a global CDN, how would you design the HTML markup and server‑side logic to deliver the optimal format without breaking existing pages?
Follow-up Questions
- How would you handle browsers that block autoplay?
- What accessibility features should you add for media elements?
- How do you test media playback across different devices and network conditions?