onseeking是视频跳转开始时触发的事件处理器,用于状态反馈而非控制跳转;应通过addeventlistener绑定,避免覆盖和耦合,并在canplay或loadedmetadata后监听以确保有效。

onseeking 是事件处理器,不是属性或函数
直接写 onseeking 只能作为 HTML 内联属性或 JS 对象属性使用,它本身不“执行跳转”,只是响应跳转开始的动作。真正触发跳转的是设置 video.currentTime —— 无论用户拖进度条还是脚本赋值,只要浏览器进入寻址流程,就会把 video.seeking 设为 true,并同步触发 onseeking。
用 onseeking 做什么才合理
它适合做“跳转中”的状态反馈,而不是控制跳转逻辑本身:
- 禁用进度条拖动(防止连续设
currentTime导致 seeking 频繁触发) - 显示“加载中…”提示,避免用户误以为卡死
- 暂停 requestAnimationFrame 更新 UI(比如实时同步进度条位置)
- 记录跳转意图(如埋点上报“用户发起跳转”,而非“跳转完成”)
别在 onseeking 回调里读 video.currentTime —— 此时值大概率还是旧的,画面也未就绪。
onseeking 和 addEventListener("seeking") 的区别
两者本质相同,但绑定方式影响可维护性:
-
video.onseeking = function() {...}:会覆盖之前绑定的同名处理器,不适合多模块协作 -
video.addEventListener("seeking", handler):支持多次绑定,推荐用于复杂页面 - 内联写法
<video onseeking="handleSeeking()"></video>:耦合 HTML 与 JS,调试困难,且函数必须挂在全局(如window.handleSeeking)
现代项目一律用 addEventListener,避免意外覆盖。
为什么 onseeking 有时像没反应?
常见原因不是语法错,而是时机或范围问题:
- 监听器绑太早:DOM 元素还没加载完,
document.querySelector("video")返回null→ 事件根本没挂上 - 跳转目标超出
video.seekable范围:比如 MP4 文件未建索引,拖到中间空白段,seeking会一直为true,seeked永不触发 - 移动端 touchmove 中频繁设
currentTime:可能被节流或丢帧,导致seeking事件漏掉 - 视频未触发
loadedmetadata就监听:此时seekable为空,任何跳转都无效
最稳妥做法是等 canplay 或 loadedmetadata 后再绑定 seeking 监听器,并校验 video.seekable.length > 0。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











