onplay、onpause 和 ontimeupdate 是 html5 媒体元素核心事件：onplay 在播放实际开始时触发，用于启动计时器或埋点；onpause 在主动暂停时触发，用于记录时长或更新 ui；ontimeupdate 周期性触发以同步进度条、弹幕等，需节流避免性能问题。
onplay、onpause 和 ontimeupdate 是 HTML5 <video></video> 与 <audio></audio> 元素最常用且最实用的三个媒体事件，它们分别反映播放状态变化和时间推进，是构建自定义播放器、统计行为、同步字幕或控制 UI 的核心依据。
onplay：播放真正开始时触发
它在视频/音频**从暂停或初始状态进入播放**时触发，注意不是用户点击“播放”按钮那一刻（此时可能还在加载），而是画面/声音实际渲染出来的瞬间。
- 适合用于启动计时器、上报“开始播放”埋点、启用进度条拖动功能
- 与
play()方法调用不同步——调用play()后可能因缓冲延迟数毫秒才触发onplay - 若视频设了
autoplay，且浏览器允许（如静音），onplay仍会可靠触发 - 推荐用
addEventListener('play', handler)绑定，避免内联写法污染 HTML 结构
onpause：播放被主动中断时触发
当用户点击暂停、脚本调用 pause() 或播放被其他操作（如失去焦点）打断时触发。它**不**在缓冲等待或网络卡顿时触发——那些情况属于临时阻塞，仍属“播放中”。
- 常用于记录播放时长、暂停时显示封面图、关闭实时字幕滚动
- 注意：
paused属性为true是判断暂停状态的依据，但onpause才是状态变更的信号 - 如果需区分“用户手动暂停”和“自动暂停”，可结合
event.type === 'pause'与鼠标/键盘事件上下文判断
ontimeupdate：播放进度持续更新的通道
只要媒体处于播放状态，该事件就会周期性触发（通常每 200–250ms 一次），提供最细粒度的时间反馈。它是实现进度条同步、关键帧标记、定时弹幕的基础。
-
video.currentTime在回调中可实时读取当前播放秒数，video.duration获取总时长（注意：初始为NaN，需等canplaythrough后才稳定） - 避免在回调里执行重绘或复杂计算，否则可能拖慢播放流畅度；高频操作建议节流（如用
requestAnimationFrame或简单时间间隔过滤） - 不要依赖它来判断“是否播完”——
ended才是唯一可靠的结束信号；ontimeupdate中检查currentTime >= duration - 0.1容易因精度或加载延迟误判
这三个事件配合使用，就能覆盖绝大多数播放控制场景：比如点击播放按钮 → 触发 play() → 等待 onplay 更新 UI → 启动 ontimeupdate 驱动进度条 → 用户暂停 → onpause 记录位置 → 再次播放继续同步。逻辑清晰，无需额外轮询。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
