video seeked事件不触发的主因是未达可seek状态:需readystate≥4且seeking为false;动态设src后须重置currenttime=0再赋值;duration为nan时seek无效;框架中需等dom就绪及src加载完成;seek后需显式play()并处理promise拒绝。

video 元素的 seeked 事件不触发?检查 preload 和 src 设置时机
视频加载完成后跳转到指定时间点失败,往往不是 currentTime 赋值本身出错,而是元素尚未进入可 seek 状态。关键前提是:必须等 readyState ≥ 4(HAVE_ENOUGH_DATA)且 seeking 为 false 后再操作。
常见错误是:src 动态设置后立刻调 play() 或改 currentTime,此时浏览器可能还处于 NETWORK_LOADING 阶段,seeking 会静默失败,也不抛错。
-
preload="auto"并不能保证首帧就 ready,尤其在弱网或大文件下;更稳妥的是监听loadedmetadata+canplay,再结合readyState判断 - 动态设置
src后,需重置currentTime = 0再赋目标值,否则部分浏览器(如 Safari)会忽略首次 seek - 若用
blob:或data:URL,确保 MIME type 正确(如video/mp4),否则readyState卡在 0
Chrome/Firefox 中 currentTime 设定后自动回退到 0?注意 duration 是否为 NaN
当 video.duration 是 NaN 时,任何对 currentTime 的赋值都会被忽略,并可能触发回退——这不是 bug,而是规范行为:未解析出时长信息前,浏览器无法验证时间有效性。
典型场景包括:MP4 文件缺失 moov header(未 fast-start)、流媒体无 duration 声明、或 CORS 配置导致 duration 不可读(如响应头缺 Accept-Ranges: bytes)。
立即学习“前端免费学习笔记(深入)”;
- 检查控制台是否报
DOMException: The element has no supported sources或Failed to load because no supported source was found,这常掩盖真正的元数据加载失败 - 用
video.addEventListener('loadedmetadata', () => console.log(video.duration))确认是否拿到有效数值 - 服务端返回 MP4 时务必确保
moov在文件开头;可用ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4修复
React/Vue 中视频跳转失效?别在组件挂载瞬间直接操作 DOM
框架的异步渲染机制可能导致 ref 绑定的 video 元素虽已声明,但实际 DOM 尚未插入文档,或 src 还未触发加载流程。此时调 currentTime 相当于对一个“空壳”操作。
- Vue 用户应等待
onMounted+nextTick,且确保src已绑定并触发了更新(避免 v-if/v-show 切换干扰) - React 用户推荐用
useEffect(() => { if (videoRef.current && videoRef.current.src) { /* 操作 */ } }, [videoRef.current?.src]),依赖src变化而非仅挂载 - 避免在
setState后立即调currentTime,状态更新和 DOM 渲染有延迟,加个setTimeout(..., 0)或queueMicrotask更可靠
seek 完成后画面卡住/黑屏?检查 play() 调用时机与用户手势限制
即使 currentTime 成功变更、seeked 触发,视频也可能不播放——现代浏览器强制要求 play() 必须由用户手势(click/tap)触发,否则静音且暂停。自动 seek 后不显式 play(),或 play() 被 Promise reject,就会停留在黑帧。
- 捕获
play()的 Promise 拒绝:video.play().catch(e => console.warn('Autoplay prevented:', e)) - 若需无交互启动,可设
muted+autoplay,但注意autoplay仍受preload和资源加载状态影响 - 某些安卓 WebView 对
play()后立即currentTime敏感,建议在playing事件后再 seek,或用setTimeout(() => video.currentTime = t, 10)错开时序
最易被忽略的是:视频容器的 CSS 层叠上下文或 transform 属性(如 scale(0.99))有时会干扰硬件加速路径,导致 seek 后解码帧无法上屏——遇到黑屏但音频正常,先检查样式层。











