onplay事件仅在媒体进入播放状态瞬间触发一次，而非持续触发；它不保证首帧已渲染或currentTime已更新，且依赖用户交互、资源加载和浏览器策略才能成功触发。
onplay 事件不是“播放时持续触发”，而是“进入播放状态那一刻触发”
很多人误以为 onplay 会在视频每帧播放时反复执行，其实它只在播放状态被激活的**那个瞬间**触发一次——比如用户点播放按钮、调用 video.play() 成功后、或从暂停恢复时。它不等同于 ontimeupdate，后者才是持续触发的进度事件。
常见错误现象：console.log('playing') 只打印一次，但你期望它随播放一直输出；或者你在 onplay 里试图读取 video.currentTime，却发现值还是 0 —— 这往往是因为事件触发得太早，首帧尚未渲染，currentTime 还没来得及更新。
-
onplay触发时机：媒体元素从“暂停/加载中/就绪但未播”状态切换为“正在播放”时 - 它不保证视频已解码到当前时间点，也不代表画面已显示
- 若用 JavaScript 调用
play()，需注意该方法返回 Promise，onplay只在 Promise resolve 后才可能触发（取决于浏览器实现）
HTML 内联写法 vs JavaScript 绑定，哪个更可靠？
直接写 <video onplay="handlePlay()"> 看似简单，但有明显限制：
- 无法在事件处理函数中访问
event对象（比如想阻止默认行为？不行，onplay本身不可取消） - 作用域受限，容易和全局变量冲突
- 不利于复用和测试，调试时也难追踪来源
推荐始终用 addEventListener("play", handler)：
立即学习“前端免费学习笔记（深入）”；
const video = document.getElementById("myVideo");
video.addEventListener("play", () => {
console.log("play event fired at", video.currentTime);
// 可安全读取 currentTime、volume、muted 等状态
});
注意：addEventListener 不支持 IE8 及更早版本，但 2026 年已无需兼容这类浏览器。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么有时 onplay 没触发？关键在“播放状态是否真被激活”
最常踩的坑是：调用了 video.play()，但控制台没打印，也没执行后续逻辑。原因通常不是代码写错，而是浏览器策略或状态未满足：
- 用户未与页面交互（如点击、触摸）就调用
play()，现代浏览器会静默拒绝，onplay自然不会触发 - 视频
preload设为"none"，且尚未加载任何数据，play()会立即 reject，不进入播放状态 - 视频源无效或跨域未配 CORS，导致加载失败，
readyState停留在 0，play()抛错，onplay不触发 - 误把
canplay或canplaythrough当成play—— 它们表示“可以播了”，但还没真正开始播
验证方式：在 play 事件监听器外加一句 console.log(video.paused, video.ended, video.readyState)，确认状态确实已变。
onplay 和 canplaythrough 的配合使用场景
单纯靠 onplay 做业务逻辑（比如上报播放起始、启动计时器、显示水印）往往不够稳。真实项目中建议组合使用：
- 用
canplaythrough确保资源已缓冲充足，再调用play()，降低因卡顿导致播放失败的概率 - 在
play事件里做“播放中”的状态标记（如isPlaying = true），避免重复触发逻辑 - 搭配
pause和ended事件，构成完整播放生命周期钩子
示例：
video.addEventListener("canplaythrough", () => {
video.play().catch(e => console.warn("play failed:", e));
});
video.addEventListener("play", () => {
if (!playedOnce) {
reportPlayStart(); // 只上报一次
playedOnce = true;
}
});
真正容易被忽略的是：即使 onplay 触发了，也不能假设视频一定在流畅播放——网络抖动、内存压力、GPU 解码失败都可能导致后续卡顿或中断。需要结合 timeupdate、waiting、stalled 等事件做兜底判断。
