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.