HTML Media - Introduction

Media Elements in HTML5

Before HTML5, media required third-party plugins like Flash or QuickTime.

HTML5 introduced <audio> and <video> elements for native media playback.

These elements provide built-in controls, JavaScript API access, and wide browser support.

Media elements support multiple formats to ensure cross-browser compatibility.

Modern browsers support common formats like MP4, WebM, MP3, and Ogg.

<!-- Video element -->
<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser doesn't support HTML5 video.
</video>

<!-- Audio element -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser doesn't support HTML5 audio.
</audio>

Common Media Attributes

The controls attribute displays play, pause, volume, and seek controls.

The autoplay attribute starts playing media automatically (use cautiously - may annoy users).

The loop attribute makes media repeat continuously.

The muted attribute starts media muted (required for autoplay in many browsers).

The preload attribute hints how much to buffer: none, metadata, or auto.

<!-- Video with controls -->
<video src="video.mp4" controls width="640" height="360"></video>

<!-- Auto-playing muted video (common for background videos) -->
<video src="background.mp4" autoplay muted loop></video>

<!-- Audio with preload -->
<audio src="song.mp3" controls preload="metadata"></audio>

<!-- Video without preloading -->
<video src="large-video.mp4" controls preload="none"></video>

Multiple Source Formats

Use the <source> element to provide multiple formats for browser compatibility.

Browsers try each source in order until they find a supported format.

For video: provide MP4 (H.264) for Safari/Edge and WebM (VP8/VP9) for Chrome/Firefox.

For audio: provide MP3 for maximum compatibility and Ogg Vorbis as an alternative.

Always include fallback text for browsers that don't support the media element.

<!-- Video with multiple formats -->
<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  <p>Your browser doesn't support HTML5 video. 
     <a href="video.mp4">Download the video</a> instead.</p>
</video>

<!-- Audio with multiple formats -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio.</p>
</audio>

Controlling Media with JavaScript

Media elements have a JavaScript API for programmatic control.

Methods include play(), pause(), load(), and canPlayType().

Properties include currentTime, duration, volume, playbackRate, and paused.

Events include play, pause, ended, timeupdate, volumechange, and error.

This API enables building custom media players and interactive experiences.

<video id="myVideo" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
</video>

<button onclick="playPause()">Play/Pause</button>
<button onclick="skip(-10)">-10s</button>
<button onclick="skip(10)">+10s</button>

<script>
const video = document.getElementById('myVideo');

function playPause() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

function skip(seconds) {
  video.currentTime += seconds;
}

// Event listener
video.addEventListener('ended', function() {
  alert('Video finished!');
});
</script>

Accessibility Considerations

Always include captions/subtitles using the <track> element for deaf or hard-of-hearing users.

Provide audio descriptions for blind or visually impaired users.

Don't autoplay media with sound - it can be disorienting and inaccessible.

Ensure custom media controls are keyboard accessible.

Provide transcripts for both audio and video content.

<!-- Video with captions -->
<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="captions-en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="captions-es.vtt" kind="subtitles" srclang="es" label="Spanish">
  <track src="descriptions.vtt" kind="descriptions" srclang="en" label="Audio descriptions">
</video>

<!-- Audio with transcript link -->
<audio src="podcast.mp3" controls></audio>
<p><a href="transcript.html">Read transcript</a></p>