📂 HTML5 Multimedia

1. What’s New in HTML5 Multimedia

   • <video> and <audio> as native elements

   • No need for Flash/third-party plugins

   • Support for multiple formats & captions (<track>)

2. Working with Video

   • <video> tag basics (attributes: controls, autoplay, loop, poster)

   • Adding multiple sources with <source>

   • Using <track> for captions & subtitles

   • Responsive video (CSS techniques)

   • Fallback with <embed> or <object>

3. Working with Audio

   • <audio> tag basics

   • Attributes: controls, autoplay, loop, preload

   • Multiple formats (MP3, Ogg, WAV)

   • Fallback text & download links

4. Embedding & Fallback Options

   • <embed> and <object> as backups

   • Providing a download link

5. Accessibility

   • Captions and subtitles with WebVTT

   • Transcripts for audio/video

   • Avoiding autoplay with sound

Incorporating Sound & Video in HTML5 — step-by-step notes with examples

1) What’s new with audio & video in HTML5?

• Native elements: <video> and <audio> — no plugins (Flash) required.

• Multiple source formats via <source> so browsers can pick a supported codec.

• Subtitle/caption support with <track> (WebVTT).

• Native controls (controls) plus Media APIs for JavaScript control and events.

• Better accessibility semantics (captions, transcripts, aria hooks).

Use these tags for embedding playable media; use CSS for layout and responsive behavior.

2) The <video> tag — attributes & step-by-step usage

Core attributes

• src — direct video file (use <source> for multiple files/formats instead).

• controls — show browser’s playback UI.

• autoplay — play automatically (modern browsers block autoplay unless muted).

• muted — start muted (useful with autoplay).

• loop — replay when ended.

• poster="image.jpg" — image shown before playback starts.

• preload="auto|metadata|none" — how much to preload.

• playsinline — allow inline playback on mobile (iOS Safari).

• width, height — intrinsic dimensions (use CSS for responsive sizing).

• crossorigin — for CORS when loading media or track from other origins.

Example — recommended pattern with multiple sources + captions + fallback

<video controls preload="metadata" poster="poster.jpg" width="640" height="360" playsinline>
  <!-- Modern/Preferred formats first -->
  <source src="video-1080p.webm" type="video/webm; codecs=vp9,opus">
  <source src="video-1080p.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <!-- Captions / subtitles (WebVTT) -->
  <track kind="captions" srclang="en" label="English" src="captions_en.vtt" default>
  <track kind="subtitles" srclang="es" label="Spanish" src="captions_es.vtt">

  <!-- Fallback content: object/embed and download link -->
  <object data="video-1080p.mp4" type="video/mp4" width="640" height="360">
    <embed src="video-1080p.mp4" type="video/mp4" width="640" height="360">
    </embed>
    <p>Your browser does not support HTML5 video. <a href="video-1080p.mp4">Download the video</a>.</p>
  </object>
</video>

Notes

• Put the highest-efficiency format first (e.g., WebM/AV1), then MP4 as fallback. Include types for clarity.

• The <track> element points to a WebVTT (.vtt) file for captions; default chooses the track by default.

• Provide fallback content and a download link for very old browsers.

3) The <embed> tag — fallback plan and usage

• <embed> is a generic embedded resource tag. It can embed media, PDFs, plugins, etc.

• It’s not semantic for video — prefer <video> + fallback <object>/<embed> only for legacy support.

Simple <embed> example (fallback only)

<!-- Use only as fallback; don't rely on it as primary -->
<embed src="video-1080p.mp4" type="video/mp4" width="640" height="360">

Better fallback flow inside <video> (as shown above):

• Browser tries <video> sources; if unsupported, <object> (and nested <embed>) may try to play the file; finally show a download link.

4) Placing a video on a page — layout & responsive techniques

Basic inline usage

<video controls src="clip.mp4" width="640" height="360"></video>

Responsive video — modern CSS (preferred)

<style>
.responsive-video {
  max-width: 100%;
  aspect-ratio: 16/9; /* preserves aspect ratio */
  height: auto;
}
.responsive-video video { width: 100%; height: 100%; display:block; }
</style>

<div class="responsive-video">
  <video controls poster="poster.jpg">
    <source src="clip.webm" type="video/webm">
    <source src="clip.mp4" type="video/mp4">
  </video>
</div>

Fallback (older browsers) — padding-top trick

<style>
.video-wrap { position: relative; padding-top: 56.25%; /* 16:9 */ }
.video-wrap video { position: absolute; top:0; left:0; width:100%; height:100%; }
</style>

<div class="video-wrap">
  <video controls src="clip.mp4"></video>
</div>

Performance tips

• Use preload="metadata" or preload="none" to avoid downloading full file before user interaction.

• Provide a poster image to avoid showing a black box.

• Use properly encoded/resized files (bitrate & resolution appropriate for web).

5) Captions, subtitles & WebVTT (<track>)

Kinds

• kind="captions" — same-language captions for the deaf/hard-of-hearing (includes non-dialogue info).

• kind="subtitles" — translated text of spoken dialog.

• kind="descriptions" — audio descriptions of visual actions.

• kind="chapters" — cue points for navigation.

• kind="metadata" — non-rendered cues for scripts.

How to add (example repeated)

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

Sample WebVTT file — captions_en.vtt

WEBVTT

00:00:00.000 --> 00:00:03.500
Speaker 1: Welcome to the demo.

00:00:03.600 --> 00:00:07.000
[Sound of waves]

Accessibility

• Always provide captions for spoken content.

• Provide a full transcript (linked near the player) for accessibility, search engines, and indexing.

6) The <audio> tag — attributes & examples

Core attributes

• controls, autoplay, loop, preload, muted, src or <source>.

• crossorigin when pulling audio from other origins.

Simple example

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

Background music (with caution)

• If you must have background audio, don’t autoplay with sound — this is intrusive and many browsers block it. If autoplay is essential, use muted and provide user controls to unmute.

File input for upload + preview (example with JS)

• You can preview uploaded audio before sending — requires a small JS snippet (see section 8 below).

7) Formats & encoding recommendations (practical)

Video

• Provide at least two formats for widest compatibility:

  • MP4 (H.264 video + AAC audio) — very widely supported (MIME video/mp4).

  • WebM (VP8/VP9/AV1 + Opus) — modern and efficient (MIME video/webm).

  • Ogg (Theora) — legacy, less common now.
    Audio

• Provide at least:

  • MP3 (audio/mpeg) — very widespread.

  • Ogg/Opus (audio/ogg) or AAC for better compression and openness.

• Also consider WAV for lossless (large files; use sparingly).

MIME types

• video/mp4, video/webm, video/ogg

• audio/mpeg, audio/ogg, audio/wav

8) Simple JavaScript controls (optional) — play/pause & events

<video id="vid" width="640" controls>
  <source src="clip.mp4" type="video/mp4">
</video>

<button id="playPause">Play/Pause</button>
<script>
const v = document.getElementById('vid');
const btn = document.getElementById('playPause');
btn.addEventListener('click', () => {
  if (v.paused) v.play();
  else v.pause();
});
v.addEventListener('timeupdate', () => {
  // can update a custom progress bar here
  // console.log(Math.round(v.currentTime));
});
v.addEventListener('ended', () => {
  // do something on end
});
</script>

Notes

• Use the Media APIs for richer UIs, analytics, and accessibility-friendly custom controls.

• When creating custom controls, ensure keyboard accessibility and ARIA labels.

9) Accessibility & best practices (must-read)

• Always provide captions (<track kind="captions">) for speech.

• Provide a text transcript (separate page or hidden <div>) for accessibility & SEO.

• Avoid autoplay with sound. If autoplay is used, make the video muted by default and give a clear control to unmute.

• Use aria-label or visible text for custom controls; ensure focus order and keyboard accessibility.

• Use title, aria-describedby as needed for extra context.

• Provide download link and fallback content for older browsers.

• Consider crossorigin and correct CORS headers when streaming media or loading subtitles from a different origin.

10) Small cheat-sheet templates

Minimal video

<video controls width="640" poster="poster.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" srclang="en" src="captions_en.vtt" label="English">
  Your browser doesn't support video. <a href="movie.mp4">Download</a>
</video>

Minimal audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser doesn't support audio. <a href="audio.mp3">Download</a>
</audio>