HTML — Media

🎬 Friendly Introduction – What “Media” Means in HTML

HTML lets you place pictures, sounds, and moving pictures (videos) right inside a web page.
These elements are called media because they convey information through sight or sound rather than plain text.

Why use media?

• It makes a page more engaging.
• It can explain concepts that are hard to describe with words.
• Modern browsers understand media tags without extra plugins.

In the previous lesson we learned about SVG – a vector‑based picture format.
Now we turn to audio and video, and we’ll see how to let the browser play them for us.

---

📸 Embedding Images – The <img> Tag Recap

Even though images are not the main focus of this lesson, they share the same idea of source (src) and alternative text (alt).
Here’s a quick reminder:

<img src="mountain.jpg" alt="Snow‑capped mountain at sunrise" width="300">

• src – the URL of the picture file.
• alt – text shown when the image cannot load; also read by screen readers.
• width / height – optional size hints.

Good to know: Always provide an alt attribute. It improves accessibility and SEO.

---

🔊 Adding Sound – The <audio> Element

The <audio> tag tells the browser to play an audio file.
You can give users controls (play, pause, volume) or let the sound start automatically.

Simple audio with default controls

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

What the browser displays

A small player bar with a play button, a timeline, and a volume control.

Auto‑play and looping

<audio src="rain.wav" autoplay loop>
  Your browser does not support the audio element.
</audio>

• autoplay – start playing as soon as the page loads.
• loop – restart the audio when it ends.

Common mistake: Using autoplay without user interaction can be blocked by browsers, especially on mobile devices.

Multiple source formats

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

The browser picks the first format it understands.

---

🎞️ Embedding Video – The <video> Element

Video works much like audio but adds a visual component.
The basic structure mirrors <audio>: a container tag, one or more <source> tags, and fallback text.

Minimal video example

<video width="480" controls>
  <source src="waves.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

What the browser displays

A rectangular player 480 px wide, showing the first frame of the video with Play, Timeline, and Volume controls.

Adding subtitles (captions)

<video width="640" controls>
  <source src="lecture.webm" type="video/webm">
  <track src="lecture-en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

• <track> – links a caption file (WebVTT format).
• kind="subtitles" – tells the browser these are textual captions, not descriptions.

Poster image and muted start

<video width="640" controls poster="thumb.jpg" muted>
  <source src="intro.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

• poster – image shown before the user presses Play.
• muted – starts the video without sound (required for many browsers when autoplay is used).

Autoplay with mute (common pattern for hero sections)

<video autoplay muted loop playsinline style="width:100%;">
  <source src="cityscape.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

• playsinline – on mobile, the video stays in the page instead of opening full‑screen.

Common mistake: Forgetting muted when using autoplay. Most browsers block autoplay with sound.

---

📊 Comparison Table – Audio vs. Video Attributes

Attribute	<audio>	<video>	What it does
src	✅	✅	Direct URL of the media file
controls	✅	✅	Shows built‑in play/pause UI
autoplay	✅	✅	Starts playback automatically
loop	✅	✅	Restarts when the file ends
muted	✅	✅	Starts without sound
poster	❌	✅	Image shown before video plays
preload	✅	✅	Hint to the browser how much to download early (none, metadata, auto)
width/height	❌	✅	Sets the display size of the video box

---

🛠️ Advanced Tips

Controlling playback with JavaScript

<video id="myVid" width="400" controls>
  <source src="sample.mp4" type="video/mp4">
</video>

<button onclick="document.getElementById('myVid').play()">Play</button>
<button onclick="document.getElementById('myVid').pause()">Pause</button>
<button onclick="document.getElementById('myVid').currentTime = 0">Restart</button>

• play() – starts playback.
• pause() – stops playback but keeps the current position.
• currentTime – numeric property (seconds) that you can set to jump to a point in the video.

Using the preload attribute wisely

<audio controls preload="metadata">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

metadata tells the browser to download only the file’s header (duration, dimensions).
This speeds up page load while still letting the user see the total length.

Tip: For large videos, use preload="none" and let the user decide when to start loading.

Responsive video with CSS

<div class="responsive-video">
  <video controls>
    <source src="nature.mp4" type="video/mp4">
  </video>
</div>

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.responsive-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The container keeps the video’s aspect ratio while allowing it to scale with the page width.

---

📦 Packaging Media Files

Media type	Recommended format	Reason
Image (photo)	JPEG or WebP	Good compression, wide support
Vector graphic	SVG	Scalable, small file size
Audio (music)	MP3 (audio/mpeg) or OGG (audio/ogg)	MP3 works everywhere; OGG is open source
Video (short)	MP4 (H.264) or WebM (VP9)	MP4 is universal; WebM offers better compression for modern browsers

Always provide at least two formats for audio and video to cover older browsers.

---

🧭 Accessibility Checklist

1. Provide alt text for every <img> (already covered).
2. Add captions (<track kind="captions">) for videos.
3. Supply transcripts for audio content (link to a .txt file).
4. Avoid autoplay with sound – it can disorient users with screen readers.
5. Ensure controls are keyboard‑focusable – native <audio> and <video> controls already meet this requirement.

---

## Common mistakes checklist

• Forgetting the alt attribute on images.
• Using only one source format for audio/video (may break on some browsers).
• Autoplaying media with sound – most browsers block it.
• Omitting the fallback text inside <audio> / <video> tags.
• Not providing captions or transcripts for accessibility.
• Setting fixed pixel widths on videos without making them responsive.

---

## Mini Practice

1. Insert an audio clip of your favorite song. Include both .mp3 and .ogg sources, and enable native controls.
2. Create a video player that shows a poster image before playback, loops forever, and starts muted. Use a video you have on your computer.
3. Add subtitles to the video from step 2 using a WebVTT file. Verify that the captions appear when you turn them on.
4. Make the video responsive by wrapping it in a container with CSS (as shown earlier). Resize the browser window to see it adapt.
5. Write a short JavaScript snippet that pauses the video when a “Stop” button is clicked.

Happy coding! 🎉