controls属性不能限制点击频率，因为它仅指示浏览器显示原生控件，不提供防抖、节流或事件拦截能力；真正可干预的是通过js绑定的play/pause事件或自定义控件。
为什么 controls 属性不能限制点击频率
HTML 的 controls 属性只是告诉浏览器“显示原生播放控件”，它本身不提供任何防抖、节流或事件拦截能力。你点得再快，浏览器照样响应——因为底层是原生控件，无法用 JS 直接劫持其点击逻辑。真正能干预的，只有通过 JS 绑定到 <video></video> 或 <audio></audio> 元素上的事件（比如 play、pause），或者用自定义控件替代原生控件。
用 play() 和 pause() 手动控制时怎么防连点
当你禁用 controls，改用按钮调用 play() / pause() 时，必须自己加防护。否则用户狂点按钮，会触发多个 play() 调用，部分浏览器（如 Safari）可能抛出 DOMException: The request is not allowed by the user agent or the platform in the current context. 错误。
- 用一个布尔状态变量（如
isPlaying）标记当前媒体是否处于播放中 - 点击时先检查状态：如果正在播放，只调
pause()；否则才调play() - 对
play()调用加try...catch，捕获拒绝错误（比如用户未交互就自动播放被拒） - 不要依赖
canplay或loadeddata后立刻允许点击——要等readyState >= 4且networkState === 1（即已加载且可播放）
const media = document.querySelector('video');
let isPlaying = false;
document.getElementById('playBtn').addEventListener('click', async () => {
if (isPlaying) {
media.pause();
isPlaying = false;
} else {
try {
await media.play();
isPlaying = true;
} catch (err) {
// 常见错误：AbortError 或 NotAllowedError
console.warn('Play rejected:', err.name);
}
}
});
用 CSS 禁用按钮交互比 JS 更可靠
仅靠 JS 判断状态仍可能因异步延迟（比如 play() 返回 Promise 但 DOM 更新滞后）导致双击生效。最稳妥的方式是在视觉和交互层同步禁用按钮。
- 点击后立即设按钮
disabled属性，并加pointer-events: none防止 CSS 动画或过渡期间穿透点击 - 在
play或pause事件回调里再恢复按钮可用性（而不是等 Promise resolve —— 因为play()成功后不一定立刻触发playing事件） - 注意：Safari 对
disabled的 button 在 flex 布局中可能错位，建议同时加opacity: 0.6和cursor: not-allowed
自定义控件里怎么处理多实例冲突
如果页面有多个 <video></video>，共用同一套 JS 控制逻辑，容易出现状态错乱——比如点第二个视频的播放键，却影响了第一个的状态变量。
- 每个按钮绑定时，必须绑定到对应媒体元素的闭包作用域，别用全局变量存
isPlaying - 推荐用
data-video-id关联按钮和媒体，或直接用event.target.closest('[data-video]').querySelector('video')动态查找 - 避免监听全局
click，而是给每个按钮单独绑定，防止事件冒泡干扰 - 如果用框架（如 React），确保状态与组件实例一一对应，不要把播放状态提升到共享父级而没做 key 区分
真正难的不是写防抖逻辑，而是判断「什么时候才算一次有效播放」——是 play() 调用成功？还是 playing 事件触发？或是画面第一帧渲染？不同场景得按需选锚点。别指望 HTML 属性替你做决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
