HTML Audio/Video DOM seeking 事件（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

事件概述：什么是 HTML Audio/Video DOM seeking 事件？

在 HTML5 的音频和视频元素中，用户常常需要快速跳转到特定时间点，例如快进或快退。当用户通过拖动进度条或调用 currentTime 属性修改播放位置时，浏览器会触发一系列事件。其中，seeking 事件正是在用户开始寻找新播放位置时触发的核心事件。
可以将 seeking 事件想象为一场“导航之旅”的起点：当用户决定跳转到视频的某个片段时，浏览器就像驾驶员一样，开始寻找新的目的地。此时，seeking 事件会通知开发者：“用户已经按下导航按钮，正在前往新坐标”。

触发条件详解：事件触发的三大场景

场景 1：用户手动拖动进度条

当用户用鼠标或触控设备拖动音频/视频控件的进度条时，浏览器会立刻触发 seeking 事件。此时，播放器会暂停当前播放，并开始加载新时间点的内容。

场景 2：程序代码修改 currentTime 属性

通过 JavaScript 动态修改 <audio> 或 <video> 元素的 currentTime 属性时，也会触发该事件。例如：

const video = document.querySelector('video');
video.currentTime = 120; // 跳转到 2 分钟位置，触发 seeking 事件

场景 3：网络加载延迟时的自动重定位

在流媒体播放中，如果因网络问题导致缓冲不足，浏览器可能自动调整播放位置。此时，seeking 事件也会被触发。

比喻小贴士
可以把 seeking 事件比作汽车的导航系统：当驾驶员输入新地址时，系统会立即响应“正在规划路线”，此时事件触发，车辆尚未到达新位置，但已进入导航状态。

与相关事件的对比：seeking 和 seeked 的协作关系

在寻找播放位置的过程中，seeking 事件与 seeked 事件形成了一对“开始-结束”组合。以下是两者的对比表格：

实际案例：如何监听 seeking 事件

基础代码示例

以下代码展示了如何为视频元素添加 seeking 事件监听器，并在控制台输出调试信息：

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('seeking', (event) => {
  console.log('用户正在跳转到新时间点:', event.target.currentTime);
  // 可在此执行其他操作，如更新进度条样式
});

综合案例：自定义进度条的联动控制

通过结合 seeking 和 seeked 事件，可以实现更复杂的交互逻辑。例如：

// 获取元素
const video = document.getElementById('myVideo');
const progressBar = document.getElementById('progress-bar');

// 监听拖动行为
progressBar.addEventListener('input', (e) => {
  video.currentTime = e.target.value; // 触发 seeking 事件
});

// 更新 UI 状态
video.addEventListener('seeking', () => {
  progressBar.classList.add('loading'); // 显示加载动画
});

video.addEventListener('seeked', () => {
  progressBar.classList.remove('loading'); // 恢复正常状态
});

进阶技巧：性能优化与事件处理

1. 在 seeking 期间禁用其他操作

当用户正在跳转时，可能需要暂时禁用其他控件（如播放/暂停按钮），避免误操作。例如：

videoElement.addEventListener('seeking', () => {
  document.querySelector('.controls').disabled = true;
});

videoElement.addEventListener('seeked', () => {
  document.querySelector('.controls').disabled = false;
});

2. 结合其他事件实现进度条实时更新

通过 timeupdate 事件同步进度条位置，与 seeking 事件配合可实现更流畅的交互：

// 更新进度条数值
function updateProgress() {
  progressBar.value = video.currentTime;
}

video.addEventListener('timeupdate', updateProgress);
video.addEventListener('seeking', updateProgress); // 确保跳转后立即更新

3. 处理移动端的触摸事件兼容性

在移动端开发中，需注意触摸事件与 seeking 的联动逻辑。例如：

let isSeeking = false;

progressBar.addEventListener('touchstart', () => {
  isSeeking = true;
});

video.addEventListener('seeked', () => {
  isSeeking = false;
  // 处理触控结束后的逻辑
});

常见问题与解决方案

Q：为什么有时 seeked 事件未触发？

A：当修改 currentTime 后立即跳转到同一时间点（例如 video.currentTime = video.currentTime），浏览器可能认为无需触发事件。此时需确保时间值确实改变。

Q：如何获取跳转前的原始时间？

A：可以通过在 seeking 事件中记录当前时间，再在 seeked 中对比新旧值：

let originalTime = 0;

video.addEventListener('seeking', () => {
  originalTime = video.currentTime;
});

video.addEventListener('seeked', () => {
  console.log('从', originalTime, '跳转到', video.currentTime);
});

结论：掌握 seeking 事件的实战价值

通过深入理解 HTML Audio/Video DOM seeking 事件，开发者能够为用户提供更流畅的交互体验。无论是制作音乐播放器、在线视频平台，还是开发自定义控件，这一事件都是实现“时间跳转”功能的核心工具。
从基础代码到复杂场景，从事件监听到性能优化，合理运用 seeking 事件不仅能提升用户体验，还能为后续开发奠定坚实的基础。现在，不妨尝试将这些知识应用到你的项目中，让音频和视频控件真正“活”起来！