HTML5支持的音频与视频格式

HTML5为开发者提供了原生支持音频和视频的能力，通过<audio>和<video>标签可以直接嵌入多媒体内容，无需依赖第三方插件。不同浏览器对格式的支持存在差异，理解这些格式的兼容性对实现跨平台播放至关重要。

音频格式支持

HTML5支持的常见音频格式包括MP3、WAV、OGG和AAC。每种格式的编码方式和浏览器兼容性各不相同。

MP3 (MPEG-1 Audio Layer III)

MP3是最广泛支持的音频格式，几乎所有现代浏览器都兼容。它的压缩率高，音质损失较小。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

WAV (Waveform Audio File Format)

WAV是无损音频格式，文件体积较大。适合需要高保真音质的场景。

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

OGG (Ogg Vorbis)

OGG是开源格式，压缩率优于WAV。Firefox和Chrome支持良好，但Safari和IE不支持。

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

AAC (Advanced Audio Coding)

AAC是MP3的升级版，音质更好。iOS设备普遍支持。

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

视频格式支持

HTML5视频格式主要包括MP4、WebM和OGG。不同格式的编码方式和浏览器支持程度差异明显。

MP4 (MPEG-4)

MP4是最通用的视频格式，采用H.264编码。所有主流浏览器均支持。

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

WebM

WebM是开源格式，采用VP8或VP9编码。Chrome、Firefox和Opera支持良好。

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

OGG (Theora)

OGG是开源视频格式，但兼容性较差。主要在Firefox和Opera中支持。

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

编解码器与MIME类型

正确的MIME类型对浏览器识别媒体文件至关重要。常见组合包括：

• 音频：

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

• 视频：

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

多源回退策略

为确保最大兼容性，应提供多个源文件：

<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>您的浏览器不支持HTML5视频。</p>
</video>

格式转换工具

常用转换工具包括：

• FFmpeg：命令行工具，支持几乎所有格式转换
• HandBrake：图形界面工具，适合MP4转换
• Audacity：专业音频编辑和转换软件

示例FFmpeg命令：

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

浏览器兼容性检测

通过JavaScript可以检测浏览器支持的格式：

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

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

性能优化建议

• 音频：优先使用MP3格式平衡质量和大小
• 视频：H.264编码的MP4最通用，VP9编码的WebM更高效
• 流媒体：考虑使用MSE (Media Source Extensions)实现自适应比特率

高级功能实现

通过Media API可以实现更复杂的控制：

const player = document.getElementById('videoPlayer');
player.addEventListener('loadedmetadata', () => {
  console.log(`视频时长：${player.duration}秒`);
});

// 自定义播放控制
document.getElementById('playBtn').addEventListener('click', () => {
  player.play();
});