Chapter 2.5☕ 12 min read

Audio & Video

Osmania Biscuit ad jaisa — audio aur video lagao page pe.

01What are Audio & Video in HTML?

You're watching an Osmania Biscuit ad on YouTube. Crispy biscuit dipping in chai — the crunch, the steam, the satisfaction. Now imagine that on your own webpage. That's what the <audio> and <video> tags do.

🎬

Media Analogy: Before HTML5, you needed Flash or third-party plugins to play media. Now you just use tags — like ordering chai instead of brewing it yourself.

02The audio & video Tags

The <audio> and <video> tags are the modern way to embed media:

<video src="video.mp4" controls> — Video player with controls
<audio src="song.mp3" controls> — Audio player with controls
controls — Shows play/pause, volume, fullscreen
autoplay — Starts playing when page loads
loop — Repeats when finished
muted — Starts with sound off
poster — Thumbnail image before video plays
Multiple <source> tags — Different formats for browser compatibility

<video controls width="640" poster="thumbnail.jpg">
  <source src="biryani.mp4" type="video/mp4">
  <source src="biryani.webm" type="video/webm">
  <p>Your browser doesn't support video. <a href="biryani.mp4">Download the video</a> instead.</p>
</video>

<audio controls>
  <source src="chai-song.mp3" type="audio/mpeg">
  <source src="chai-song.ogg" type="audio/ogg">
  <p>Your browser doesn't support audio.</p>
</audio>

03How Media Works — Flow

Browser loads pageFinds <video> or <audio> tag

→

Checks format supportTries first source, then next

→

Shows player/fallbackRenders player if supported, fallback text if not

Pro tip: Always provide multiple source formats (MP4 + WebM for video, MP3 + OGG for audio). Different browsers support different formats. And always include controls — never autoplay without user consent.

04Media Formats & Attributes

Choose the right format for your media:

MP4 (H.264) — Universal browser support. Best for video.
WebM — Smaller file size. Open format. Good for speed.
MP3 — Universal audio format. Works everywhere.
OGG — Open alternative to MP3. Free from patents.

05Exercise — Build a Media Player

Build a Hyderabad music video page with audio and video elements.

<!-- video: Hyderabad tourism video -->
<!-- audio: Background biryani sizzle sound -->
<!-- Multiple source tags -->
<!-- Controls on both -->
<!-- Poster image on video -->

Complete these:

One <video> with controls, poster, and 2 source formats One <audio> with controls and 2 source formats Fallback text for both elements muted attribute on video for autoplay

Done — Key Points:

✅ <video> and <audio> embed media without plugins
✅ Always use controls attribute
✅ Provide multiple source formats (MP4 + WebM)
✅ Add fallback text for old browsers
✅ Never autoplay without user consent (and muted)

Previous2.4 — Semantic HTML 📋 All Chapters Next Chapter3.1 — HTML5 APIs →