html5音视频稳定播放需规范组织source与track：source须在video内且按h.264 mp4→vp9 webm顺序排列，type属性必须准确；track须紧随所有source之后，kind/srclang/label/src/default缺一不可；vtt文件须utf-8无bom、同源或配cors。
要让 HTML5 音视频在主流浏览器中稳定播放并支持字幕，关键不是堆砌标签，而是按规范顺序组织 <source></source> 和 <track></track>，同时匹配格式与编码。下面几点是实际项目中验证有效的做法。
source 必须放在 video/audio 内部，且不能和 src 属性共存
一个 <video></video> 或 <audio></audio> 元素里，要么用 src 属性指定单个资源，要么用多个 <source></source> 子元素提供备选源——两者不可混用。浏览器会从上到下依次检查每个 <source></source> 的 type，加载第一个它能解码的格式。
- 优先把 H.264 编码的 MP4 放在第一位，因为 Chrome、Firefox、Edge、Safari（包括 iOS）都原生支持
video/mp4 - 第二位推荐 VP9 编码的 WebM（
video/webm），对 Firefox 和 Chrome 更友好，文件体积通常更小 - 如果还要照顾老版本 Firefox 或 Opera，可加第三位 Ogg Theora（
video/ogg），但当前已非必需 -
<source></source>的type属性必须写准确，比如type="video/mp4"，不能省略或写成mp4
track 必须紧跟在所有 source 之后，且属性一个都不能少
<track></track> 标签必须嵌套在 <video></video> 或 <audio></audio> 内部，并严格位于所有 <source></source> 标签闭合之后、 之前。顺序错或位置错，字幕就不会显示。
-
kind指明轨道类型，字幕用subtitles，带音效说明的用captions -
srclang必须标明语言代码，如zh、en，否则浏览器可能忽略该轨道 -
label是用户在控制条里看到的名称，建议用中文或英文明确标识 -
src必须指向 WebVTT（.vtt）文件，SRT 文件兼容性差，建议统一转为 VTT 格式 - 如有默认启用的字幕，加上
default属性，但同一时间只能有一个default
格式与编码要分开看，MP4 不等于一定能播
后缀名只是容器，真正决定能否播放的是里面的编码。例如：
- H.264 + AAC 的 MP4：全平台通吃，是兼容底线
- H.265（HEVC）的 MP4：Safari 支持好，Chrome 和 Firefox 基本不支持软解，需依赖硬件
- VP9 + Opus 的 WebM：Chrome/Firefox/Edge 支持良好，Safari 14.1+ 才开始有限支持
- 音频同理，MP3 和 AAC 兼容性远高于 FLAC 或 Opus（尤其 Safari 对 Opus 支持不稳定）
最后别忘了降级提示和基础防护
即使写了多组 source 和 track，也要考虑极端情况：
- 在
闭合前，写一行普通文本，如“您的浏览器不支持视频播放”，这是给 IE8 或极旧浏览器的兜底内容 - 确保 .vtt 字幕文件是 UTF-8 无 BOM 编码，且服务器允许跨域（CORS），否则 Chrome/Firefox 会静默失败
- 移动端自动播放受限，如需 autoplay，务必加上
muted，否则多数浏览器直接屏蔽 - 用 CSS 控制
max-width: 100%配合height: auto，避免响应式错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
