PHP小码农

Appearance

媒体格式兼容性 ​

不同浏览器对音频和视频格式的支持各不相同。本节将全面梳理主流音频格式（MP3、AAC、OGG、Opus）和视频格式（MP4、WebM、OGG）的浏览器兼容性，帮助你在项目中做出正确的格式选择。

前置知识

阅读本节前，建议先了解：媒体属性与 API

基础概念 ​

媒体格式的兼容性是 Web 多媒体开发的核心问题。不同的浏览器和操作系统支持不同的音频/视频编码格式。选择正确的格式组合，确保你的媒体内容能在所有目标平台上正常播放，是前端开发者的基本技能。

编码格式（Codec）决定了媒体文件的压缩方式和质量，而容器格式（Container）决定了文件的封装方式。例如，MP4 是容器格式，H.264 和 AAC 是其中的编码格式。

语法 ​

格式声明方式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>媒体格式声明</title>
</head>
<body>
  <h1>媒体格式声明方式</h1>

  <!-- 视频：推荐 WebM + MP4 组合 -->
  <video controls width="640" height="360">
    <source src="movie.webm"
            type="video/webm; codecs=vp9,opus">
    <source src="movie.mp4"
            type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
    <p>不支持视频播放：<a href="movie.mp4">下载文件</a></p>
  </video>

  <hr>

  <!-- 音频：推荐 Opus/Ogg + MP3 组合 -->
  <audio controls>
    <source src="music.opus"
            type="audio/opus">
    <source src="music.ogg"
            type="audio/ogg; codecs=vorbis">
    <source src="music.mp3"
            type="audio/mpeg">
    <p>不支持音频播放：<a href="music.mp3">下载文件</a></p>
  </audio>
</body>
</html>

详细说明 ​

音频格式对比 ​

格式容器编码压缩ChromeFirefoxSafariEdge推荐
MP3.mp3MP3 (MPEG-1/2 Layer 3)有损支持支持支持支持广泛兼容
AAC.m4a/.aacAAC (Advanced Audio Coding)有损支持支持支持支持高质量音频
OGG.oggVorbis有损支持支持不支持支持开源替代
Opus.opus/.oggOpus有损支持支持支持(17+)支持最佳音质

视频格式对比 ​

格式容器视频编码音频编码ChromeFirefoxSafariEdge
MP4 (H.264).mp4H.264/AVCAAC支持支持支持支持
MP4 (H.265).mp4H.265/HEVCAAC部分部分支持部分
WebM (VP8).webmVP8Vorbis支持支持不支持支持
WebM (VP9).webmVP9Opus/Vorbis支持支持不支持支持
WebM (AV1).webmAV1Opus支持支持支持(17+)支持
OGG (Theora).ogvTheoraVorbis支持支持不支持支持

推荐格式组合 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>推荐格式组合</title>
</head>
<body>
  <h1>推荐的格式组合</h1>

  <!--
    视频推荐策略：
    1. AVIF/WebM (AV1) - 最新最高效
    2. WebM (VP9) - 兼容性好
    3. MP4 (H.264) - 通用回退

    音频推荐策略：
    1. Opus - 最佳音质
    2. OGG (Vorbis) - 开源
    3. MP3 - 通用回退
  -->

  <!-- 视频：三级回退 -->
  <video controls width="640" height="360">
    <source src="movie-av1.webm"
            type="video/webm; codecs=av1,opus">
    <source src="movie-vp9.webm"
            type="video/webm; codecs=vp9,opus">
    <source src="movie-h264.mp4"
            type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
    <p>不支持视频播放</p>
  </video>

  <hr>

  <!-- 音频：三级回退 -->
  <audio controls>
    <source src="music.opus" type="audio/opus">
    <source src="music.ogg" type="audio/ogg; codecs=vorbis">
    <source src="music.mp3" type="audio/mpeg">
    <p>不支持音频播放</p>
  </audio>
</body>
</html>

容器格式 vs 编码格式 ​

html
<!--
  容器格式（Container）：
  - MP4、WebM、OGG、MKV
  - 负责封装视频流、音频流、字幕等
  - 决定文件扩展名

  编码格式（Codec）：
  - H.264、H.265、VP8、VP9、AV1（视频）
  - AAC、MP3、Opus、Vorbis（音频）
  - 决定压缩效率和画质/音质

  一个 MP4 文件可以使用不同的编码：
  - MP4 + H.264 + AAC（最通用）
  - MP4 + H.265 + AAC（更高效，兼容性差）
  - MP4 + AV1 + Opus（最新，兼容性一般）
-->

使用 canPlayType 检测支持 ​

javascript
var video = document.createElement('video');
var audio = document.createElement('audio');

// 检测视频格式
console.log('VP9:', video.canPlayType('video/webm; codecs=vp9'));
console.log('H.264:', video.canPlayType('video/mp4; codecs=avc1.42E01E'));
console.log('AV1:', video.canPlayType('video/webm; codecs=av1'));

// 检测音频格式
console.log('Opus:', audio.canPlayType('audio/opus'));
console.log('Vorbis:', audio.canPlayType('audio/ogg; codecs=vorbis'));
console.log('MP3:', audio.canPlayType('audio/mpeg'));

// 返回值：
// "probably" - 很可能支持
// "maybe" - 可能支持
// "" - 不支持

实战示例 ​

带格式检测的媒体播放 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>格式检测</title>
</head>
<body>
  <h1>浏览器支持的媒体格式</h1>

  <div id="format-info"></div>

  <script>
    var video = document.createElement('video');
    var audio = document.createElement('audio');

    var formats = [
      { type: 'video/webm; codecs=vp9', label: 'WebM VP9' },
      { type: 'video/webm; codecs=av1', label: 'WebM AV1' },
      { type: 'video/mp4; codecs=avc1.42E01E', label: 'MP4 H.264' },
      { type: 'video/mp4; codecs=hvc1', label: 'MP4 H.265' },
      { type: 'audio/opus', label: 'Opus' },
      { type: 'audio/ogg; codecs=vorbis', label: 'OGG Vorbis' },
      { type: 'audio/mpeg', label: 'MP3' },
    ];

    var html = '<table border="1" cellpadding="8">';
    html += '<tr><th>格式</th><th>支持程度</th></tr>';

    formats.forEach(function(fmt) {
      var result = video.canPlayType(fmt.type) ||
                   audio.canPlayType(fmt.type);
      var status = result === 'probably' ? '完全支持' :
                   result === 'maybe' ? '可能支持' : '不支持';
      html += '<tr><td>' + fmt.label + '</td><td>' + status + '</td></tr>';
    });

    html += '</table>';
    document.getElementById('format-info').innerHTML = html;
  </script>
</body>
</html>

注意事项 ​

  • Safari 对 WebM 的支持有限（iOS 上基本不支持，macOS Safari 17+ 部分支持）
  • H.265/HEVC 在 Safari 上支持，但 Chrome/Firefox 支持有限
  • AV1 在所有主流浏览器的最新版本中已基本支持
  • 编码工具的选择很重要：FFmpeg 是最通用的转码工具
  • type 属性中的 codecs 参数要与实际编码匹配

最佳实践 ​

  • 视频提供 WebM (VP9) + MP4 (H.264) 双格式，确保全平台兼容
  • 音频提供 Opus + MP3 双格式
  • 高质量场景可加入 AV1 格式
  • 使用 FFmpeg 转码时指定正确的编码参数
  • 使用 canPlayType() 在 JS 中检测浏览器支持
  • 为移动端考虑文件大小，提供合适的码率

下一节

继续学习：iframe 内联框架

参考链接 ​