标签需显式设src或、controls，注意mime类型、移动端autoplay限制及格式兼容性；mp4最兼容，webm体积小，av1压缩优但耗性能；play()须同步触发，poster非加载态替代，moov box需前置。
用 <video></video> 标签是最直接的方式
浏览器原生支持，不用额外库，加载快、兼容好。关键不是“能不能放”，而是“怎么放才不翻车”。
- 必须提供至少一个
src，或者用<source></source>指定格式，否则在 safari 或 firefox 里可能黑屏无报错 -
controls属性得显式写上，否则默认没播放按钮——很多人以为“加了标签就自动有控件”，其实没有 - 常见错误：把 MP4 路径写成相对路径但忘了服务器没配 MIME 类型，chrome 会静默失败，控制台只报
ERR_CONTENT_DECODING_FAILED这类模糊错误 - 移动端注意：
autoplay基本无效（ios 强制用户手势触发），muted是绕过限制的必要条件
MP4、WebM、AV1 格式怎么选
不是所有格式都能随便换，浏览器支持差异实际影响首帧加载和解码性能。
- MP4（H.264 + AAC）：兼容性最好，但体积大、编码慢，适合老设备或需要 100% 覆盖的场景
- WebM（VP9）：Chrome/Firefox 支持好，体积比 MP4 小 20–30%，但 Safari 16.4 之前完全不支持
- AV1：压缩率最高，但解码耗 CPU，低端安卓机可能卡顿；目前仅 Chrome 110+、Firefox 115+、Safari 17+ 支持
- 实操建议：用
<source></source>按优先级从高到低排列，浏览器自动选第一个能播的，比如先 MP4 再 WebM
自定义控件时 play() 被拒怎么办
现代浏览器对自动播放策略越来越严，哪怕绑在 click 上，如果调用链里有异步延迟（比如 promise.then、setTimeout），也会被当成非用户手势触发。
- 错误写法：
button.addEventListener('click', () => setTimeout(() => video.play(), 0))→ 触发NotAllowedError - 正确写法：确保
play()在原生事件回调同步执行，中间不能穿插异步逻辑 - 如果必须异步加载资源再播放，先调用
video.load()，等loadeddata事件后再play()，且该事件必须由用户操作引发（比如点击后立即 load） - 静音是保底方案：
video.muted = true后，大部分浏览器允许自动play()
视频封面图和加载态怎么稳住体验
poster 属性只是第一帧快照，不能替代加载状态反馈，尤其在弱网下用户可能盯着黑屏 3 秒不知所措。
立即学习“前端免费学习笔记（深入）”；
-
poster必须是静态图片 URL，不能是 base64（部分 iOS 版本会忽略） - 监听
video.readyState：值为0（HAVE_NOTHING）表示还没加载元数据，1（HAVE_METADATA）表示已有尺寸/时长，这时可隐藏 loading 动画 - 别依赖
canplay事件——它只表示“理论上能播”，实际首帧仍可能卡住；更稳妥的是监听playing（真正开始渲染帧） - 服务端注意：MP4 的 moov box 必须在文件开头（即“faststart”），否则 Chrome 会等整个文件下载完才触发
loadedmetadata
事情说清了就结束