HTML Media
HTML Multimedia
Section titled “HTML Multimedia”Multimedia encompasses sound, music, videos, movies, and animations integrated into web pages. HTML5 provides standard elements for embedding and controlling media content.
From Plug-ins to Native Support
Section titled “From Plug-ins to Native Support”Early web browsers required external plug-ins (like Flash Player, QuickTime, or RealPlayer) to handle audio and video. This led to compatibility issues, security risks, and poor performance, especially on mobile devices.
HTML5 introduced the <audio> and <video> elements, providing a standardized, native way for browsers to embed and play media without relying on plug-ins. This is the modern approach.
Common Media Formats for the Web
Section titled “Common Media Formats for the Web”Media files come in various formats (containers) which bundle encoded audio and video tracks (codecs). Choosing the right format and codec is crucial for browser compatibility and efficient delivery.
Video Formats & Codecs:
Section titled “Video Formats & Codecs:”No single format/codec is supported by all browsers, but some have very broad support.
| Format | Extension | Description (Common Codecs) | HTML5 Browser Support |
|---|---|---|---|
| MP4 | .mp4 | Container: MPEG-4. Codecs: H.264 (Video) + AAC (Audio). Most widely compatible format across modern browsers and devices. Recommended for general use. (H.264 is patented). | Excellent |
| WebM | .webm | Container: WebM. Codecs: VP8/VP9/AV1 (Video) + Vorbis/Opus (Audio). Open and royalty-free alternatives. Gaining widespread support. AV1 offers excellent compression. | Very Good |
| Ogg | .ogv | Container: Ogg. Codecs: Theora (Video) + Vorbis (Audio). Open format, but Theora video support is less common now compared to WebM or MP4. | Fair/Declining |
Legacy formats like AVI, WMV, MOV (QuickTime), and FLV (Flash Video) are not suitable for native HTML5 <video> playback and should be converted to MP4 or WebM.
Audio Formats & Codecs:
Section titled “Audio Formats & Codecs:”| Format | Extension | Description | HTML5 Browser Support |
|---|---|---|---|
| MP3 | .mp3 | Codec: MPEG Audio Layer III. Universally supported audio format, good compression. Still very common, though patented. | Excellent |
| AAC | .aac, .m4a | Codec: Advanced Audio Coding. Generally better quality than MP3 at similar bitrates. Widely supported, often used within MP4 containers. | Excellent |
| Ogg Vorbis | .ogg, .oga | Codec: Vorbis. Open and royalty-free alternative to MP3/AAC. Good quality and compression. Widely supported. | Very Good |
| Opus | .opus | Codec: Opus. Modern, open, royalty-free codec. Excellent for both music and speech at various bitrates. Often used within WebM or Ogg containers. Great support. | Very Good |
| WAV | .wav | Container: Waveform Audio Format. Often contains uncompressed PCM audio. Results in large file sizes but is widely supported. Good for short sound effects. | Excellent |
Formats like WMA (Windows Media Audio) and older RealAudio are generally not supported for native HTML5 <audio> playback.
Providing Multiple Sources
Section titled “Providing Multiple Sources”Because no single format is guaranteed to work everywhere, the best practice is to provide media in multiple formats using the <source> element inside <audio> or <video>.
The browser will check each <source> element in order and use the first one it understands.
Example for Video:
<video controls width="640" height="360" poster="video-poster.jpg"> <source src="videos/my-video.webm" type="video/webm"> <source src="videos/my-video.mp4" type="video/mp4"> <!-- Fallback text for older browsers --> Your browser does not support the video tag.</video>Example for Audio:
<audio controls> <source src="audio/my-song.opus" type="audio/opus"> <source src="audio/my-song.ogg" type="audio/ogg; codecs=vorbis"> <source src="audio/my-song.mp3" type="audio/mpeg"> <!-- Fallback text --> Your browser does not support the audio element.</audio>The type attribute in <source> is crucial. It tells the browser the MIME type (and optionally codecs) of the file, allowing it to quickly determine if it can play the format without downloading it first.
Recommendation: Provide at least MP4 (H.264/AAC) for broad compatibility and optionally WebM (VP9/Opus or AV1/Opus) as a modern, royalty-free alternative.
Media Accessibility (<track>)
Section titled “Media Accessibility (<track>)”To make audio and video content accessible to everyone, including users with hearing impairments or those in noisy environments, provide text tracks using the <track> element.
The <track> element specifies timed text files (usually in WebVTT format, .vtt) containing subtitles, captions, descriptions, etc.
<video controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español"> <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions"> Your browser does not support the video tag.</video>Key <track> attributes:
kind: Type of track (subtitles,captions,descriptions,chapters,metadata).src: URL of the track file (.vtt).srclang: Language of the track text.label: Title of the track shown to the user in the browser’s media controls.default: Boolean attribute indicating the track should be enabled by default.
Providing captions and subtitles is essential for accessible multimedia content.