HTML5 supported audio and video formats

HTML5 provides developers with native support for audio and video capabilities through the <audio> and <video> tags, allowing direct embedding of multimedia content without relying on third-party plugins. Different browsers have varying levels of support for formats, and understanding these compatibility differences is crucial for achieving cross-platform playback.

Audio Format Support

HTML5 supports common audio formats such as MP3, WAV, OGG, and AAC. Each format has its own encoding method and browser compatibility.

MP3 (MPEG-1 Audio Layer III)

MP3 is the most widely supported audio format, compatible with almost all modern browsers. It offers high compression rates with minimal loss of audio quality.

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

WAV (Waveform Audio File Format)

WAV is a lossless audio format with larger file sizes. It is suitable for scenarios requiring high-fidelity audio.

<audio controls>
  <source src="audio.wav" type="audio/wav">
</audio>

OGG (Ogg Vorbis)

OGG is an open-source format with better compression than WAV. It is well-supported in Firefox and Chrome but not in Safari or IE.

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
</audio>

AAC (Advanced Audio Coding)

AAC is an upgraded version of MP3, offering better sound quality. It is widely supported on iOS devices.

<audio controls>
  <source src="audio.aac" type="audio/aac">
</audio>

Video Format Support

HTML5 video formats mainly include MP4, WebM, and OGG. These formats differ in encoding methods and browser support.

MP4 (MPEG-4)

MP4 is the most universal video format, using H.264 encoding. It is supported by all major browsers.

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

WebM

WebM is an open-source format using VP8 or VP9 encoding. It is well-supported in Chrome, Firefox, and Opera.

<video width="320" height="240" controls>
  <source src="video.webm" type="video/webm">
</video>

OGG (Theora)

OGG is an open-source video format but has poor compatibility. It is mainly supported in Firefox and Opera.

<video width="320" height="240" controls>
  <source src="video.ogv" type="video/ogg">
</video>

Codecs and MIME Types

Correct MIME types are essential for browsers to recognize media files. Common combinations include:

• Audio:

  • MP3: audio/mpeg
  • WAV: audio/wav
  • OGG: audio/ogg
  • AAC: audio/aac

• Video:

  • MP4: video/mp4
  • WebM: video/webm
  • OGG: video/ogg

Fallback Strategy with Multiple Sources

To ensure maximum compatibility, provide multiple source files:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  <p>Your browser does not support HTML5 video.</p>
</video>

Format Conversion Tools

Common conversion tools include:

• FFmpeg: A command-line tool supporting almost all format conversions
• HandBrake: A GUI tool ideal for MP4 conversion
• Audacity: Professional audio editing and conversion software

Example FFmpeg command:

ffmpeg -i input.wav -codec:a libmp3lame output.mp3

Browser Compatibility Detection

Use JavaScript to detect supported formats:

const audio = document.createElement('audio');
const video = document.createElement('video');

console.log('MP3 support:', audio.canPlayType('audio/mpeg') !== '');
console.log('WebM support:', video.canPlayType('video/webm') !== '');

Performance Optimization Tips

• Audio: Prefer MP3 for a balance of quality and size
• Video: H.264-encoded MP4 is the most universal, while VP9-encoded WebM is more efficient
• Streaming: Consider using MSE (Media Source Extensions) for adaptive bitrate streaming

Advanced Feature Implementation

Use the Media API for more complex controls:

const player = document.getElementById('videoPlayer');
player.addEventListener('loadedmetadata', () => {
  console.log(`Video duration: ${player.duration} seconds`);
});

// Custom playback control
document.getElementById('playBtn').addEventListener('click', () => {
  player.play();
});