<video>和<audio>必须带src或<source>才能触发加载，否则不发起请求、不触发事件；健壮写法需HTML层声明有效源，优先用带type的<source>，避免混用src；preload是建议非保证，metadata最稳妥；fallback应含描述文字、<track>、下载链接；自动播放必须muted且在HTML中声明。
为什么 <video> 和 <audio> 必须带 src 或 <source> 才能触发加载
不提供可解析的媒体源时，浏览器根本不会发起请求，也不会触发 canplay、loadedmetadata 等事件——哪怕 DOM 已插入。常见错误是只写空标签：<video></video>，或仅靠 JS 后续动态赋值 src，却没处理加载失败兜底。
健壮写法必须在 HTML 层就声明至少一个有效来源：
- 优先用
<source>标签提供多格式备选（如mp4+webm），让浏览器自主选择 -
src属性和<source>不要混用：若用了<source>，src会被忽略 - 每个
<source>必须带type（如type="video/mp4"），否则 Safari 可能跳过该源
preload 的实际行为远比文档写的复杂
preload 不是“保证预加载”，而是向浏览器发出建议。不同浏览器、不同设备、不同网络条件下表现差异极大——尤其在移动 Safari 上，preload="auto" 几乎总被无视，强制降级为 metadata。
关键判断点：
立即学习“前端免费学习笔记（深入）”；
-
preload="none"：真·不加载，适合页面内大量媒体但用户交互才播放的场景 -
preload="metadata"：最稳妥选择，只取时长、宽高、码率等基础信息，兼容性好且省流量 -
preload="auto"：仅在明确知道用户大概率会播放（如单视频落地页）且带 loading 提示时考虑
注意：preload 对 <audio> 的影响比 <video> 更敏感；iOS 上任何 preload 值都不会自动下载音频数据。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
如何让 <video> 在无 JavaScript 时仍显示有意义的 fallback
很多人把 fallback 写成纯文字或静态图，但真正健壮的结构应兼顾语义、可访问性和降级体验。
正确 fallback 结构需包含：
- 第一层：描述性文字（如
会议现场实录，含中英双语字幕），供屏幕阅读器和禁用 JS 的用户理解内容 - 第二层：
<track>标签（即使 JS 控制字幕也应在 HTML 中声明），确保字幕文件路径可被原生解析 - 第三层：备用链接（
<a href="recording.mp4">下载完整视频</a>），避免用户卡在空白容器里
不要把 poster 图片写成 <img> 插在 <video> 外部——它必须是 poster 属性值，否则无法被原生控件识别，也无法在加载前占位。
移动端自动播放策略下，muted 是硬性前提而非可选项
Chrome、Safari、Edge 全部要求：自动播放（autoplay）+ 有声音（未 muted）= 直接拒绝。哪怕你用 play() 调用，只要没用户手势上下文，就会抛 NotAllowedError。
真正可用的组合只有两种：
-
autoplay+muted：可立即播放，适用于背景视频、轮播 banner - 无
autoplay，靠用户点击后调用play()：此时可取消静音，但必须发生在用户手势之后（如click、touchstart）
容易忽略的细节：muted 属性必须出现在 HTML 中（<video muted>），不能仅靠 JS 设置——某些 iOS 版本会忽略 JS 动态设置的 muted 状态。
