play()和pause()需在用户手势（如点击）后调用，否则因浏览器自动播放策略抛出notallowederror；应通过paused属性判断状态，监听play/pause事件而非轮询，并注意ios/safari的playsinline等限制。
如何用 play() 和 pause() 控制媒体元素
HTML 中的 <audio></audio> 和 <video></video> 元素原生支持播放与暂停，核心就是调用它们的 play() 和 pause() 方法。但直接调用不总成功——现代浏览器要求用户手势（如点击）触发播放，否则会抛出 NotAllowedError。
- 必须确保 DOM 已加载完成，再获取元素并绑定事件
- 不能在页面加载后自动调用
play()（除非设置了muted且autoplay） - 推荐在按钮点击、键盘回车等明确用户交互后调用
play()
const media = document.querySelector('video');
document.getElementById('playBtn').addEventListener('click', () => {
media.play().catch(e => console.warn('播放被阻止:', e.name));
});
document.getElementById('pauseBtn').addEventListener('click', () => {
media.pause();
});
为什么 play() 有时静默失败或报错
Chrome、Safari 等主流浏览器实施了「自动播放策略」：未静音的音频/视频不允许无用户交互启动。错误通常表现为 Promise 被 reject，e.name === 'NotAllowedError'，但控制台可能不显眼。
- 检查是否在非用户手势上下文中调用（如
setTimeout、DOMContentLoaded回调里） - 若需自动播放，必须同时满足：
autoplay+muted（对<video></video>有效）或仅音频且静音 -
<audio></audio>即使muted，部分 iOS 版本仍禁止自动播放，需依赖用户点击
paused 属性和 playbackRate 的实用判断
仅靠是否调用过 play() 无法准确判断当前状态，应以元素的 paused 属性为准——它实时反映是否处于暂停态（包括初始加载完成后的暂停状态）。
-
media.paused === true表示已暂停或尚未开始播放（即使已调用play()但被策略拦截） -
media.playbackRate可读写，默认为1.0；设为0不会暂停，只是“停帧”，仍算播放中；暂停必须用pause() - 监听
play和pause事件比轮询paused更可靠
media.addEventListener('play', () => console.log('已开始播放'));
media.addEventListener('pause', () => console.log('已暂停'));
// 避免这样判断状态：
// if (wasPlayCalled) { ... } → 不可靠
移动端和 Safari 的特殊限制
iOS Safari 对 <video></video> 的控制更严格：即使有用户手势，若未设置 playsinline，视频仍可能全屏打开后才允许播放；而 <audio></audio> 在 iOS 上基本无法后台播放（离开页面即暂停）。
立即学习“Java免费学习笔记（深入）”；
- 务必为
<video></video>添加playsinline属性，否则点击播放可能先跳转全屏再卡住 - 不要依赖
canplay或loadeddata后立刻play()，iOS 需要真实触摸事件 - Safari 17+ 支持
document.hasStorageAccess()检查权限，但媒体播放权限不在此范畴，无法提前绕过
复杂点往往不在逻辑，而在你没看到的策略拦截和平台差异——尤其是用户没点屏幕前就试图 play()，或者以为 muted 就万事大吉。
