HTML5 video.play()必须由用户手势触发且需处理Promise拒绝；应监听loadedmetadata确保加载完成，并为iOS Safari设置muted和playsinline属性。
HTML5 play() 方法必须由用户手势触发
浏览器强制要求 play() 必须在用户点击、触摸、键盘事件等明确的手势回调中调用，否则会抛出 NotAllowedError。自动播放（如页面加载后立即 play()）在绝大多数现代浏览器（Chrome、Firefox、Safari）中默认被阻止。
- 正确做法：绑定到按钮的
click事件里调用video.play() - 错误写法：
video.play()放在DOMContentLoaded或setTimeout中直接执行 - Safari 对
autoplay属性更严格，即使加了muted，也建议仍走手动触发
调用前需确保媒体元素已加载元数据
play() 调用失败常见原因是媒体尚未准备好——比如 src 刚设置、网络未响应、或 loadstart 都没触发。应监听 loadedmetadata 或使用 canplay 事件做兜底。
- 推荐顺序：
video.src = 'xxx.mp4';→ 监听loadedmetadata→ 在回调里绑定 UI 按钮或自动调用play() - 避免在
onload（不存在于<video>）或oncanplaythrough（太晚，影响体验）上才准备播放逻辑 - 可先调
video.load()强制触发加载流程，但不是必需；多数情况设好src后浏览器会自动开始加载
处理 play() 返回的 Promise 拒绝情况
HTML5 play() 返回一个 Promise，失败时不会抛异常，而是 reject —— 所以必须用 .catch() 捕获，否则静默失败。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
video.play().catch(err => {
console.warn('Play failed:', err.name); // 常见为 NotAllowedError、AbortError
// 可在此提示用户点击按钮重试，或 fallback 到静音播放
});
- 不要忽略返回值：
video.play();单独写等于放弃错误反馈 - 某些安卓 WebView 或旧版 iOS 可能不支持 Promise 版本，需检测：
if (typeof video.play === 'function' && typeof video.play() === 'object') - 如果需要静音自动播放，务必加
video.muted = true;并在play()前设置，否则 mute 失效
移动端 Safari 的特殊限制与绕过要点
iOS Safari 要求视频必须满足「muted + playsinline + 用户手势触发」三者同时成立，才能内联播放；否则强制全屏且无法自动播放。
立即学习“前端免费学习笔记（深入）”；
- 必备属性：
<video muted playsinline>，缺一不可 -
playsinline不是 CSS，是 HTML 属性，不能用 JS 通过video.setAttribute('playsinline', '')动态补（部分 iOS 版本不认） - 即使满足全部条件，首次播放仍需用户点击；后续用
pause()/play()切换通常不受限 - 不要依赖
autoplay属性，它在 iOS 上基本无效，仅作降级提示用
play() 当成同步函数来用，不处理 Promise、不检查加载状态、也不适配 iOS 的 playsinline 硬性要求。这三个点任一缺失，都会导致“点不动”“没声音”“跳全屏”等具体问题。 
