Media in HTML — Interview Questions & Answers

Introduction to HTML Media

Ques: What does “media” mean in HTML?

Ans: Media refers to audio, video, and embedded content like YouTube videos, maps, or animations that enhance a webpage.

Ques: What are the main HTML media tags?

<audio> → For sound/music
<video> → For video playback
<track> → For subtitles or captions
<iframe> → For embedding external content
<embed> / <object> → For embedding other media types (like PDFs)

`<audio>` Tag

Ques: What is the <audio> tag used for?

Ans: To embed sound content like music or podcasts in an HTML page.

Example:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Ques: Why include multiple <source> tags?

Ans: For cross-browser compatibility — different browsers support different formats.

Common <audio> attributes:

Attribute	Description
`controls`	Shows play/pause controls
`autoplay`	Starts playback automatically (often restricted)
`loop`	Repeats the audio
`muted`	Starts muted
`preload`	Preloads audio data (`auto`, `metadata`, `none`)

`<video>` Tag

Ques: What is the <video> tag used for?

Ans: To embed video files directly into webpages without external plugins.

Example:

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Common <video> attributes:

Attribute	Description
`controls`	Displays video controls
`autoplay`	Starts automatically (usually with `muted`)
`loop`	Replays automatically
`poster`	Displays an image before playback
`muted`	Starts without sound
`preload`	Preloads video data before playing

`<track>` — Subtitles and Captions

Ques: What is the <track> tag used for?

Ans: To add subtitles, captions, or descriptions to <video> or <audio> content.

Example:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

Ques: What is the subtitle file format?

Ans: WebVTT (.vtt) — standard format for captions and subtitles.

Fallback Messages

Ques: Why include fallback text inside <audio> or <video>?

Ans: For browsers that don’t support HTML5 media — ensures better accessibility.

Example:

<video>
  <source src="clip.mp4" type="video/mp4">
  Sorry, your browser doesn’t support HTML5 video.
</video>

`<iframe>` — Embedding External Media

Ques: What is an <iframe>?

Ans: Inline Frame — embeds external content like YouTube videos, maps, or websites within a page.

Example of embedding a YouTube video:

<iframe width="560" height="315"
  src="<https://www.youtube.com/embed/dQw4w9WgXcQ>"
  title="YouTube video player"
  frameborder="0" allowfullscreen>
</iframe>

`<embed>` and `<object>`

Ques: What is the difference between <embed> and <object>?

Tag	Purpose	Example
`<embed>`	Embeds external files like PDFs or Flash	`<embed src="file.pdf" type="application/pdf">`
`<object>`	Embeds media or data with fallback	`<object data="file.pdf" type="application/pdf"></object>`

Ques: Are these tags still commonly used?

Ans: Rarely — replaced mostly by HTML5 <video> and <audio> elements.

Lazy Loading Media

Ques: What is lazy loading in media elements?

Ans: Delays loading of media (images, videos, iframes) until they appear on screen — improves page performance.

Example:

<iframe src="video.html" loading="lazy"></iframe>
<video src="movie.mp4" controls loading="lazy"></video>

Advanced Questions

Ques: Difference between <iframe> and <video>?

Feature	`<video>`	`<iframe>`
Purpose	Plays local/hosted videos	Embeds external content
Control	Controlled by HTML/JS	Controlled by external site
Accessibility	Built-in support	Depends on source

Ques: What does the type attribute in <source> do?

Ans: Defines the MIME type of the file (e.g., type="video/mp4"), helping browsers select the correct file.

HTML Handbook