HTML 音视频实战：格式回退、字幕、加载与无障碍

HTML 的 <audio> 和 <video> 提供浏览器原生播放控件，但不代表浏览器会解码任意媒体文件。容器（例如 MP4）和编码（例如 H.264、AAC）是不同层次；兼容性取决于浏览器、操作系统、设备解码能力、编码配置和服务端响应。上线前要在目标设备实测，而不是只看扩展名。

用多个 source 声明候选格式

浏览器按顺序尝试 <source>。type 可标出 MIME 类型和编解码器提示；即使类型正确，仍可能因编码参数、文件损坏、跨域或服务器响应失败。<video> 的子节点只在浏览器不支持这个 HTML 元素时作为回退内容；若浏览器认识元素却不能播放某种编码，不会自动展示子节点里的下载链接。

<video controls playsinline preload="metadata" width="960" height="540"
  poster="/media/demo-cover.webp">
  <source src="/media/demo.webm" type="video/webm">
  <source src="/media/demo.mp4" type="video/mp4">
  <track kind="captions" src="/media/demo.zh-CN.vtt"
    srclang="zh-CN" label="简体中文" default>
  <p>当前浏览器不支持 HTML 视频播放。
    <a href="/media/demo.mp4">下载 MP4 文件</a>。</p>
</video>

可用 canPlayType() 做能力提示，但它不是文件健康检查或播放成功的承诺。服务端应返回正确 Content-Type；支持 Range 的媒体可实现拖动进度，大文件还需考虑 CDN、转码和自适应码率，不要为了播放而把整个文件读进 JavaScript 内存。

控制加载，不强迫播放

controls 让浏览器提供播放、暂停、音量和进度控件。preload 是提示而不是命令：none 通常避免预取，metadata 获取元信息，auto 允许积极加载。长页面可对屏外视频使用 loading="lazy"，并声明宽高或 CSS aspect-ratio，避免滚动时布局跳动。

不要自动播放有声媒体。浏览器策略因用户互动、静音、权限和平台而异；autoplay="false" 依然是开启属性，关闭时必须移除该属性。若产品确实需要背景视频，应静音、内联播放、提供暂停控制并尊重减少动态效果偏好。音频内容不要自动启动。

字幕、说明与转录

<track> 能加载 WebVTT 文本轨道。captions 面向聋人和听障用户，除对白外还应包含重要声音信息；subtitles 常用于语言翻译；descriptions 提供视觉信息口述；chapters 可用于章节导航。语言标签、轨道名称和默认选项都应准确。

<video controls>
  <source src="/media/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/media/lesson.zh-CN.vtt"
    srclang="zh-CN" label="简体中文听障字幕">
</video>
<p><a href="/media/lesson-transcript.html">阅读完整文字稿</a></p>

文字稿支持搜索与快速浏览。自动字幕必须人工检查姓名、技术术语、数字和时间轴。自定义播放器要自行实现键盘操作、焦点可见、可读名称、状态播报和触屏操作；除非确有需求，原生控件更可靠。

音频、响应式与排障

音频也可有多个 <source>，并使用 controls、preload 和清晰的文字稿。视频可用 aspect-ratio 适配窄屏；装饰性预览才考虑 object-fit 裁切，不要遮掉教程关键内容。播放按钮不能只在桌面 hover 时出现。

遇到灰屏或无法播放，先检查 Network 状态码、Content-Type、Range/Content-Range、CORS、HTTPS 混合内容、文件编码与控制台错误。error 事件提示播放失败，但无法单独指出是哪一层出错；界面应提供可理解的重试或下载路径。用户提供的媒体 URL 还需校验来源与权限，不可直接拼进 HTML。

验收清单

1. 在桌面 Chrome、Safari、iOS Safari 和 Android Chrome 检查目标编码及横竖屏布局。
2. 测试静音策略、暂停恢复、快进、慢网络与 Range 请求。
3. 用键盘完成所有控件操作，切换字幕并核对文字稿。
4. 启用屏幕阅读器和系统减少动态效果设置，确认播放器仍可用。
5. 验证窄屏无溢出、尺寸预留稳定，失败状态有文字解释。

参考：MDN video、MDN audio、MDN track、MDN HTML video and audio、MDN multimedia accessibility、W3C WCAG 2.2。