video.paused判断不准的根本原因是视频未加载完成，需监听loadedmetadata或canplay事件，确保readystate≥2（have_enough_data）再操作；play()必须由用户手势同步触发；按钮状态应结合playing/pause事件而非仅依赖paused。
video.paused 判断不准？先确认视频是否真的加载完成
直接用 video.paused 判断常出错，不是因为逻辑错，而是视频还没 ready —— 比如刚插入 DOM、src 刚设、或网络延迟导致元数据未加载。此时 paused 可能为 true，但调用 play() 会失败并抛出 DOMException。
正确做法是监听 loadedmetadata 或 canplay 事件后再响应点击：
- 用
video.readyState >= 2（即HAVE_ENOUGH_DATA）比单纯看paused更可靠 - 若视频初始没设
src，首次点击前必须先赋值并调用load() - 避免在
DOMContentLoaded里立刻绑定播放逻辑，应等video元素真正可交互
play() 调用被静音拦截？用户手势是硬性前提
现代浏览器（Chrome/Firefox/Safari）强制要求：任何 play() 必须由明确的用户手势触发（如 click、touchstart），且不能跨异步任务链（比如 setTimeout 或 Promise.then 里调用）。
常见翻车点：
-
button.addEventListener('click', () => { setTimeout(() => video.play(), 0) })→ 失败 - 用
fetch加载视频后自动play()→ 被拒，即使发生在 click 回调里 - 按钮用了
preventDefault()或stopPropagation()过度，导致手势上下文丢失
安全写法：所有 play() 必须出现在原生事件回调的**同步执行路径**中。
按钮文本切换总错乱？别只靠 paused 状态
仅靠 video.paused 切换按钮文字（“播放”/“暂停”）容易错，因为：pause() 成功后 paused 立刻变 true，但 play() 成功是异步的（返回 Promise），状态不会立刻更新。
更稳的做法：
- 点击时统一设按钮为“加载中…”或禁用，等
play()Promise resolve 后再切“暂停”，reject 后还原“播放” - 监听
playing和pause事件来同步 UI，而不是只依赖点击瞬间的状态 - 注意
ended状态：视频播完后paused仍为true，但用户期望再点是“重播”，不是“继续播”
自定义按钮盖不住视频？CSS 层级和 pointer-events 很关键
把按钮放在视频上（比如居中播放图标），常遇到点击无效或穿透问题。核心是两件事：
- 按钮必须有
position: absolute+ 显式z-index（建议 ≥ 10），且父容器设position: relative - 视频元素默认不响应
pointer-events，但若加了controls，它内部控件会抢点击；所以自定义时务必去掉controls属性 - 若按钮需要透明背景，记得设
pointer-events: auto（默认即可），别误写成none
最简可用结构：
<div style="position: relative; display: inline-block;"> <video id="myVideo" width="640" height="360" preload="metadata"><source src="demo.mp4" type="video/mp4"></source></video><button id="playBtn" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;">▶</button> </div>
video 的交互本质是事件+状态+时机的组合，不是写对 play() 就完事。最容易被忽略的是：用户点击那一刻，视频到底处在哪种 readiness 阶段，以及浏览器是否还认这个点击是“有效手势”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
