video标签autoplay失效是因浏览器策略限制，需加muted属性实现静音自动播放，并确保play()调用在用户手势事件（如click）回调中执行，避免异步或非交互上下文触发。
video 标签不自动播放，autoplay 失效怎么办
浏览器策略早就限制了无用户交互下的自动播放，尤其是带声音的视频。加了 autoplay 却没反应？不是代码写错了，是默认被拦了。
- 必须配合
muted属性才能静音自动播放，比如：<video autoplay muted src="demo.mp4"></video> - Chrome、Safari 等现代浏览器对
autoplay的判定很严格：页面加载完成时若无用户手势（如 click、tap），即使写了autoplay也会静默失败 - 想“先静音播，再点一下开声”，得用 JS 监听用户事件后调用
play()，且不能在异步回调里（比如setTimeout）直接调，否则被当作非用户驱动
用 JavaScript 控制 play() 报错 NotAllowedError
这个错误几乎只出现在「没有用户手势上下文」中调用 play()。它不是 bug，是浏览器主动拒绝。
- 确保调用
play()发生在真实的用户事件回调里，例如：button.addEventListener('click', () => video.play()) - 避免在
load、DOMContentLoaded或setTimeout中调用 —— 这些都不是用户触发的上下文 - 移动端更敏感：iOS Safari 要求用户至少一次触摸屏幕后，后续的
play()才可能成功；部分 Android WebView 也沿用该策略 - 可以加个
.catch(e => console.warn('play failed:', e))捕获并降级处理，比如显示播放按钮
preload 设成 "auto" 也没预加载？
preload 是提示，不是指令。浏览器有权忽略它，尤其在移动网络、低电量或内存紧张时。
-
preload="metadata"最稳妥：只拉时长、尺寸、封面，适合列表页缩略图场景 -
preload="none"适合懒加载视频，等用户 hover 或进入视口再设置src并调load() - Chrome 会根据
preload和当前网络类型（navigator.connection.effectiveType）动态调整行为，无法强求 - 别依赖
preload="auto"实现首帧秒出，真要快，得结合服务端分片 + 客户端缓存策略
视频格式选 .mp4 就够了吗
不够。只放 .mp4 会导致 Safari 某些版本、旧 Edge 或 Firefox 在特定编码下解码失败。
立即学习“前端免费学习笔记（深入）”；
- 推荐双源兜底：
<source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"></source></source> -
.mp4用 H.264 编码（baseline 或 main profile）、AAC 音频最兼容；避免用 HEVC（H.265），iOS 以外支持差 - WebM（VP9/AV1）体积小、质量好，但 iOS 全系不支持 AV1，VP9 在 Safari 16.4+ 才开始支持
- 用
canPlayType()检测再加载对应资源，比硬写两个<source></source>更可控，但多数项目直接双源更省事
