HTML 视频标签怎么写才真正能播
浏览器里放不出来的视频，90% 是因为 <video></video> 标签没配对上实际资源或环境限制。不是代码“写错了”，而是没对齐路径、格式、MIME 类型这三样。
-
src必须指向可直连的 URL（本地开发时注意文件协议限制，file://下多数浏览器禁用<video></video>自动播放和部分解码） - 推荐显式声明
type，比如type="video/mp4"，否则浏览器要自己探测，可能失败或延迟 - MP4 容器里得是 H.264 + AAC 编码，别用 HEVC（Safari 以外基本不认），也别用 AV1（兼容性还差）
为什么加了 controls 还不能拖进度条
进度条不可拖 = 浏览器无法做 byte-range 请求，本质是服务端没返回 Accept-Ranges: bytes 响应头。静态文件服务器默认可能不支持分片传输。
- 本地用 Python 起服务：运行
python3 -m http.server 8000是支持 range 的；但双击打开 HTML 文件走file://就完全不行 - Nginx 默认开启
accept_ranges on，Apache 需确认mod_headers和mod_mime已启用 - 检查响应头：F12 → Network → 点开视频请求 → 查看 Headers → 找
Accept-Ranges字段是否为bytes
autoplay 不生效？别怪代码，先看策略
Chrome、Edge、Safari 等现代浏览器强制要求：自动播放只允许静音且用户有过交互（click/touch）之后。这是策略，不是 bug。
- 加
muted属性是硬性前提：<video autoplay muted></video> - 仍被拦截？说明页面还没触发过用户手势，可绑定一次
click事件再调play()方法 - iOS Safari 更狠：即使
muted，首次加载也不允许autoplay，必须等用户点击后才解锁
用 切换格式时常见失效点
多个 <source></source> 不是“备选列表”，而是浏览器按顺序试播，遇到第一个能解码的就停。一旦顺序或格式写错，后面全白搭。
立即学习“前端免费学习笔记（深入）”；
- 确保每个
<source></source>的type和实际文件编码严格一致（video/webm对应 VP9+Opus，不是随便改个后缀就行） - 不要在
<source></source>里写autoplay或controls—— 这些只能挂在<video></video>根标签上 - 调试技巧：删掉所有
<source></source>，只留一个src，确认单个能播；再逐个加回，观察控制台是否报Media resource ... could not be decoded
最常被跳过的其实是服务端配置和跨域问题——视频能加载但卡在 loading，大概率是 CORS 拦了 range 请求，或者 Nginx 返回了 200 但 body 为空。这时候看 Network 里的视频请求状态码和响应大小，比反复改 HTML 有用得多。
