Chapter - 6
HTML Media: Embedding Videos, Audio, and More

Why HTML Media Matters

• Webpages today deliver more than just text and images—they play music, show reels, host podcasts, and more.
• Early web pages needed clunky plugins (like Flash), but now HTML5 lets us embed audio and video natively, across all modern browsers, using tags like <video> and <audio>.

The <video> Tag: Showing Videos on Your Page

• Basic Usage:

  • Example:
    <video controls autoplay>
      <source src="3571264-uhd_3840_2160_30fps.mp4" type="video/mp4" >
    </video>
    
  • This makes your video visible and usable, with play/pause and timeline by default.

• Controlling Behavior:

  • width and height set the size:
    • Example:
      <video controls autoplay>
        <source src="3571264-uhd_3840_2160_30fps.mp4" type="video/mp4" width="640" height="360">
      </video>
  • autoplay starts video automatically (often needs muted for autoplay to work).
  • loop means replay over and over when finished.
  • poster is a thumbnail image before the video starts (like a YouTube thumbnail):
    • Example: <video controls autoplay>
        <source src="3571264-uhd_3840_2160_30fps.mp4" type="video/mp4" width="640" height="360" poster="nature.jpg" >
      </video>

The <audio> Tag: Adding Sound to Your Page

• Basic Usage:

  • Example:
    <audio controls >
      <source src="deep-abstract-ambient_snowcap-401656.mp3" type="audio/mp3">
    </audio>
    
• Functional Player with Controls:
  • Add controls for a basic audio player in the browser.
  • Example:
    <audio controls >
      <source src="deep-abstract-ambient_snowcap-401656.mp3" type="audio/mp3">
    </audio>
• Same key attributes work: autoplay, loop, muted, and preload (controls how soon the sound is downloaded).

Making Video and Audio Work for Everyone (Compatibility)

• Not all browsers support all media formats!
  • Chrome/Firefox: prefer .webm
  • Safari: prefers .mp4
  • Some support .ogg (older, open format)
• Use multiple <source> elements inside your tag:
  • Example:
    <video controls>
      <source src="clip.webm" type="video/webm">
      <source src="clip.mp4" type="video/mp4">
    Sorry, your browser does not support embedded videos.
    </video>
• The browser picks the first format it can play.
• The fallback text appears if none are supported.

Accessibility: The Element (Subtitles & Captions)

• Add subtitles, captions, and descriptions for broader access:
  • Example:
    <video controls>
      <source src="movie.mp4" type="video/mp4">
      <track src="captions_en.vtt" kind="captions" srclang="en" label="English">
      <track src="subs_es.vtt" kind="subtitles" srclang="es" label="Español" >
    </video>
• kind="captions" is for same-language dialogue and important sounds (for deaf/hard-of-hearing).
• kind="subtitles" is translation for other languages.

Two Ways of Adding Video/Audio: Comparison

Handy Symbols (HTML Entities)

• Display special symbols (like ©, ®, ™) without confusing browsers:
  • Copyright: &copy; or &#169;
  • Registered: &reg;
  • Trademark: &trade;
  • Less than: &lt;
  • Greater than: &gt;
  • Ampersand: &amp;
  • Quote: &quot;
  • Euro: &euro;
• Why? If you try to write < or > directly, the browser thinks you're starting or ending an HTML tag. Entities show these as actual characters, not code.

More References: