video标签自动播放需同时满足：autoplay、muted、playsinline；iOS还需webkit-playsinline和type属性；play()须由用户手势触发；跨域需CORS头；元素须在视口内且muted必须初始设置。
video 标签必须加哪些属性才能自动播放
手机浏览器（尤其是 iOS Safari 和新版 Android Chrome）默认禁止带声音的自动播放，光写 <video src="a.mp4"> 是没用的，几乎肯定静音卡住或直接不播。
必须同时满足三个硬性条件：
-
autoplay：声明想自动播（但单独它无效） -
muted：强制静音——这是绕过策略的关键，哪怕你后续用 JS 解除静音也得先静着启动 -
playsinline：防止 iOS 强制全屏，否则视频一触发就跳走，用户根本点不到控件
额外建议加 webkit-playsinline（iOS 旧版兼容）和 type="video/mp4"（避免 MIME 探测失败）。完整写法：
<video autoplay muted playsinline webkit-playsinline type="video/mp4" src="video.mp4"></video>
为什么 document.getElementById('v').play() 会报错“NotAllowedError”
这不是代码写错了，是浏览器策略拦截——现代移动端要求 play() 必须由真实用户手势（touchstart、click）触发，页面加载完成时 JS 主动调用会被拒绝。
立即学习“前端免费学习笔记（深入）”；
正确做法是把播放逻辑绑定到用户可触达的动作上：
- 给按钮加
touchstart事件（比click更快响应，无 300ms 延迟） - 确保该按钮在视口内、未被遮挡、CSS 没设
pointer-events: none - 调用前检查
video.readyState >= 2，避免资源还没加载完就强行播
示例：
btn.addEventListener('touchstart', () => {<br> if (myVideo.readyState >= 2) myVideo.play();<br>});
视频资源跨域失败导致加载黑屏或中断
手机浏览器对跨域视频比桌面更敏感。哪怕 src 是 HTTPS，只要视频文件放在另一个域名（比如 CDN），且服务器没返回 Access-Control-Allow-Origin 头，就会加载失败，控制台可能只显示“Media load failed”，不报具体 CORS 错。
排查和修复要点：
- 用 PC 浏览器打开同一链接，F12 → Network → 找视频请求 → 看 Response Headers 是否含
Access-Control-Allow-Origin: *或你的域名 - 确认视频服务器支持
Range请求（分段加载），否则 iOS 可能播几秒就停；用curl -I 视频URL查看是否返回Accept-Ranges: bytes - 避免使用 302 重定向后的 URL，某些安卓浏览器会丢掉原始请求头，CORS 失效
为什么 iOS 上视频一闪而过就暂停了
即使加了所有属性，iOS Safari 还有个隐藏规则：如果 <video> 元素初始不在可视区域内（比如被 display: none、opacity: 0、或滚动出屏幕外），它会主动暂停播放。
常见陷阱：
- 用 CSS 动画入场，视频 DOM 已挂载但不可见 → 播放被中断
- 用
visibility: hidden控制显隐 → iOS 不认这个，仍判定为不可见 - 页面有
user-scalable=no的 viewport 设置 → 部分 Android Chrome 会禁用触摸事件，导致后续 play() 无法触发
稳妥做法：等元素真正出现在视口内再调用 play()，可用 IntersectionObserver 监听，或简单用 setTimeout 延后 100ms 再播（仅限确定元素已渲染可见时）。
最常被忽略的一点：muted 属性不能靠 JS 后补——必须写在 HTML 标签里，或者在 canplay 事件里设 video.muted = true 再 play()，否则 iOS 仍拒播。
