HTML 媒体

HTML 多媒体

多媒体包含集成到网页中的声音、音乐、视频、电影和动画。HTML5 提供了用于嵌入和控制媒体内容的标准元素。

从插件到原生支持

早期的 Web 浏览器需要外部插件（如 Flash Player、QuickTime 或 RealPlayer）来处理音频和视频。这导致了兼容性问题、安全风险和较差的性能，尤其是在移动设备上。

HTML5 引入了 <audio> 和 <video> 元素，提供了一种标准化的原生方式，让浏览器无需依赖插件即可嵌入和播放媒体。这是现代的做法。

Web 的常用媒体格式

媒体文件有各种格式（容器），它们打包了编码的音频和视频轨道（编解码器）。选择正确的格式和编解码器对于浏览器兼容性和高效传输至关重要。

视频格式与编解码器：

没有单一的格式/编解码器能被 所有 浏览器支持，但有些格式具有非常广泛的支持。

格式	扩展名	描述（常用编解码器）	HTML5 浏览器支持
MP4	.mp4	容器：MPEG-4。编解码器：H.264 (视频) + AAC (音频)。现代浏览器和设备上最广泛兼容的格式。建议用于一般用途。（H.264 已获得专利）。	优秀
WebM	.webm	容器：WebM。编解码器：VP8/VP9/AV1 (视频) + Vorbis/Opus (音频)。开放且免版税的替代方案。正获得广泛支持。AV1 提供卓越的压缩率。	非常好
Ogg	.ogv	容器：Ogg。编解码器：Theora (视频) + Vorbis (音频)。开放格式，但 Theora 视频支持不如 WebM 或 MP4 常见。	尚可/正在衰退

像 AVI、WMV、MOV (QuickTime) 和 FLV (Flash Video) 等传统格式不适合 HTML5 <video> 的原生播放，应转换为 MP4 或 WebM。

音频格式与编解码器：

格式	扩展名	描述	HTML5 浏览器支持
MP3	.mp3	编解码器：MPEG Audio Layer III。普遍支持的音频格式，压缩效果好。仍然非常常见，尽管已获得专利。	优秀
AAC	.aac, .m4a	编解码器：Advanced Audio Coding。在相似比特率下通常比 MP3 质量更好。广泛支持，常用于 MP4 容器中。	优秀
Ogg Vorbis	.ogg, .oga	编解码器：Vorbis。开放且免版税的 MP3/AAC 替代方案。质量和压缩效果好。广泛支持。	非常好
Opus	.opus	编解码器：Opus。现代、开放、免版税的编解码器。在各种比特率下对音乐和语音都表现出色。常用于 WebM 或 Ogg 容器中。支持非常好。	非常好
WAV	.wav	容器：Waveform Audio Format。通常包含未压缩的 PCM 音频。导致文件体积较大，但广泛支持。适用于短声音效果。	优秀

像 WMA (Windows Media Audio) 和较旧的 RealAudio 等格式通常不支持 HTML5 <audio> 的原生播放。

提供多个源文件

由于没有单一格式能够保证在所有地方都正常工作，最佳实践是在 <audio> 或 <video> 内部使用 <source> 元素提供多种格式的媒体。

浏览器将按顺序检查每个 <source> 元素，并使用第一个它能理解的格式。

视频示例：

<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">
  <!-- 适用于旧浏览器的备用文本 -->
  你的浏览器不支持 video 标签。
</video>

音频示例：

<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">
  <!-- 备用文本 -->
  你的浏览器不支持 audio 元素。
</audio>

<source> 中的 type 属性至关重要。它告诉浏览器文件的 MIME 类型（可选包含编解码器），让浏览器能够快速确定是否能播放该格式，而无需先下载。

建议：至少提供 MP4 (H.264/AAC) 以实现广泛兼容性，并可选提供 WebM (VP9/Opus 或 AV1/Opus) 作为现代、免版税的替代方案。

媒体可访问性（<track>）

为了让音频和视频内容对所有人（包括听力障碍用户或处于嘈杂环境中的用户）都可访问，请使用 <track> 元素提供文本轨道。

<track> 元素指定定时文本文件（通常是 WebVTT 格式，.vtt），包含字幕、说明文字、描述等。

<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">
  你的浏览器不支持 video 标签。
</video>

关键的 <track> 属性：

• kind：轨道类型（subtitles 字幕、captions 说明文字、descriptions 描述、chapters 章、metadata 元数据）。
• src：轨道文件 (.vtt) 的 URL。
• srclang：轨道文本的语言。
• label：在浏览器媒体控件中向用户显示的轨道标题。
• default：布尔属性，指示轨道应默认启用。

提供说明文字和字幕对于可访问的多媒体内容至关重要。