html5play函数必须在canplay或canplaythrough事件触发且用户手势回调中调用，并确保video.muted=true、readyState≥2、paused=true，否则易因自动播放策略失败。
html5play 函数必须等 canplay 事件后才能安全调用
直接在 DOMContentLoaded 或 load 事件里调用 html5play()（或原生 play()）大概率失败，浏览器会抛出 NotAllowedError: play() failed because the user didn't interact with the document first 或静音策略拦截。根本原因不是“没加载完”，而是“没获得用户激活状态 + 媒体未就绪”。
正确时机是等媒体元素触发 canplay（已有足够数据可开始播放）或更稳妥的 canplaythrough（预计能播完不卡顿），且确保调用发生在用户手势（如 click、touchstart）回调中。
-
canplay：数据缓冲到可开始播放，适合对首帧延迟敏感的场景（如自动轮播视频） -
canplaythrough：浏览器预估能连续播放到底，适合对播放稳定性要求高的场景 - 务必绑定在用户交互事件内，例如：
button.addEventListener('click', () => video.play()) - 避免在
setTimeout或异步 Promise resolve 后调用——即使延迟 0ms，也已脱离用户手势上下文
使用 play() 前必须检查 readyState 和 paused
有些浏览器（尤其是 Safari iOS）即使触发了 canplay，play() 仍可能静默失败。主动检查状态能提前规避无效调用。
video.addEventListener('canplay', () => {
if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA && !video.paused) {
video.play().catch(e => console.warn('play() rejected:', e));
}
});
-
readyState === 0表示尚未初始化，不能调用play() -
readyState < 2（即HAVE_METADATA未达到）时调用，多数浏览器会拒绝 -
video.paused === true是play()的前提，但不保证成功；paused === false时再调用会抛错 -
play()返回 Promise，必须用.catch()捕获拒绝，否则错误被吞掉
自动播放策略下，muted 是绕过限制的必要条件
Chrome、Safari、Firefox 等现代浏览器默认禁止有声自动播放。即使满足所有时机条件，只要 video.muted === false 且无用户交互，play() 就会被拒。
立即学习“前端免费学习笔记（深入）”；
- 设置
video.muted = true并video.volume = 0双保险（部分安卓 WebView 需后者） - 若需后续开声，必须在用户点击按钮后调用
video.muted = false，再调play()或unmute() - 不要依赖
video.defaultMuted = true，它不改变当前 muted 状态，只影响初始值 - 检测是否被策略拦截：监听
play事件是否触发，或检查play().then()是否进入 resolve
封装 html5play 工具函数时，别漏掉 Promise 链和降级处理
所谓“html5play 函数”通常是对原生 play() 的封装，但很多人只做简单 try-catch，忽略了跨浏览器行为差异。
function html5play(video) {
if (!video || video.readyState < 2) return Promise.reject('Video not ready');
if (video.paused) {
return video.play().catch(err => {
// 尝试静音后重试（仅限自动播放场景）
if (err.name === 'NotAllowedError' && video.muted === false) {
video.muted = true;
return video.play();
}
throw err;
});
}
return Promise.resolve();
}
- 返回 Promise 是必须的，方便上层统一处理成功/失败
- 不要忽略
video.readyState < 2的情况，尤其在 src 动态设置后立即调用 - 移动端 WebView（如微信内置浏览器）可能不支持
play()Promise，需用oncanplay+setTimeout降级，但必须仍在手势回调内 - 调试时打印
video.networkState和video.error，比只看控制台报错更有针对性
真正卡住的往往不是“什么时候调”，而是“谁触发的、有没有 mute、有没有检查 readyState、Promise 漏没漏 catch”。这几个点串不起来，再多的“加载完再调”也没用。
