play()方法返回Promise而非布尔值，需用await或.then()处理；reject常见于非用户手势触发、未静音或媒体未就绪；iOS Safari限制最严，须设playsinline、muted等属性。
play() 方法返回 Promise 而不是布尔值
HTML5 play() 方法在现代浏览器中不再返回 true 或 false，而是返回一个 Promise。这是关键变化——很多旧教程仍按“调用成功返回 true”理解，结果在 Chrome 70+、Firefox 66+ 等版本里发现判断失效，就是因为没处理 Promise 的 resolved/rejected 状态。
根本原因是浏览器为防止自动播放滥用（如静音广告），将播放控制权交还给用户交互上下文，异步化是强制策略。
- 调用
play()后立即检查返回值类型：若为Promise，就必须用.then()或await - 返回的
Promiseresolve 表示浏览器允许播放（不保证音频实际发出，比如被系统静音） - reject 表示被阻止，常见原因：非用户手势触发、媒体未加载完成、
muted属性缺失且含音频轨道
常见 reject 错误信息及对应修复
捕获 play() 的 reject 可以精准定位问题。最典型的错误信息是："DOMException: play() failed because the user didn't interact with the document first." —— 这说明触发时机不在用户操作回调内（如 click、touchstart）。
- 确保调用
play()在事件处理器中，例如：button.addEventListener('click', () => video.play()) - 如果媒体有音频，必须显式设置
video.muted = true才能在无交互时自动播放（部分浏览器允许 muted 自动播） -
video.readyState === 0（即HAVE_NOTHING）时调用会 reject；应监听loadeddata或检查readyState >= 2再调用
await play() 与 then().catch() 的行为差异
两者都能处理 Promise，但错误捕获粒度不同。直接 await 会把 reject 当作运行时异常抛出，而 .catch() 只捕获 Promise rejection。
立即学习“前端免费学习笔记（深入）”；
示例对比：
try {
await video.play(); // 若 reject，进入 catch
} catch (err) {
console.error('播放被拒:', err.name); // 如 "NotAllowedError"
}
而链式写法：
video.play()
.then(() => console.log('已允许播放'))
.catch(err => console.error('拒绝原因:', err.message));
- 推荐用
await+try/catch，逻辑更线性，便于后续串行操作（如播放后立即pause()） - 注意：
await必须在async函数内，否则语法报错"SyntaxError: await is only valid in async function" -
.catch()更适合不阻塞主线程的场景，比如仅记录日志不中断流程
移动端 Safari 的特殊限制
iOS Safari 对 play() 的约束最严：即使有用户手势，若视频未设置 playsinline、未静音、或未加 webkit-playsinline，仍可能 silent reject（不抛错，Promise 也不 resolve/reject）。
- 必须添加：
- 避免依赖
canplay事件：iOS 上该事件可能不触发，改用loadedmetadata或定时轮询readyState - 某些 iOS 版本下，
play()后需手动调用video.load()才能激活缓冲，尤其在动态插入 video 元素后
这个环节最容易漏掉兼容性补丁，一到真机就静音失败，而且控制台毫无提示。
