MakeW3web

Supported Formats

Different web browsers support different media formats for the `<video>` and `<audio>` elements due to varying codecs and licensing issues. To ensure your media content is accessible across different browsers, it's essential to provide multiple file formats.

Here are some widely supported formats for the `<video>` and `<audio>` elements:

  1. `<video>` Formats:

    • MP4: The most commonly supported format, using the H.264 video codec and the AAC audio codec. It works in most browsers, including Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and Internet Explorer.
    • WebM: An open, royalty-free format that uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. It's supported in Google Chrome, Mozilla Firefox, and Microsoft Edge.
    • Ogg: An open format that uses the Theora video codec and the Vorbis audio codec. It's supported in Google Chrome, Mozilla Firefox, and Opera.
  2. `<audio>` Formats:

    • MP3: The most widely supported audio format, using the MPEG Layer III codec. It works in almost all browsers, including Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and Internet Explorer.
    • WAV: A lossless, uncompressed audio format supported in Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, due to its large file size, it's not recommended for web use.
    • Ogg: An open format that uses the Vorbis audio codec. It's supported in Google Chrome, Mozilla Firefox, and Opera.
    • AAC: A lossy audio format that provides better sound quality than MP3 at the same bit rate. It's supported in Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
    • Opus: A highly efficient open audio format that works well for both speech and music. It's supported in Google Chrome, Mozilla Firefox, and Microsoft Edge.
To provide multiple formats for your media, you can use the `<source>` element within your `<video>` or `<audio>` element:
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

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

Providing multiple formats ensures that your media content is accessible and compatible with a wider range of browsers and devices.

Was this page helpful?