如何通过HTML5中Video标签的Seeking属性判断用户是否正在拖动进度条-H5教程-PHP中文网

video.seeking是只读布尔属性，表示视频是否处于寻址中状态；seeking事件在seeking变为true时触发，seeked事件在其变回false时触发。

如何通过html5中video标签的seeking属性判断用户是否正在拖动进度条

HTML5 <video></video> 标签本身没有名为 seeking 的“属性”，但有一个 seeking 事件和一个只读的 seeking 属性（布尔值），它们共同用于判断用户是否正在拖动进度条。

理解 `video.seeking` 属性

video.seeking 是一个只读布尔值，表示视频当前是否处于“寻址中”（seeking）状态：即用户触发了跳转（如拖动进度条、点击进度条某处、调用 video.currentTime = x），但浏览器尚未完成定位、解码并开始播放新位置的内容。

它在以下情况为 true：

用户按住并拖动进度条（<input type="range"> 或原生控件）时；
用户松开鼠标前，只要新位置还未就绪；
脚本调用 video.currentTime = newTime 后，直到帧加载完成前。

监听 `seeking` 和 `seeked` 事件

仅靠 seeking 属性无法实时感知“拖动中”，需结合事件：

seeking 事件：在 seeking 属性变为 true 时立即触发（即跳转开始）；
seeked 事件：在 seeking 属性变回 false 时触发（即跳转完成，可播放）。

示例代码：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const video = document.querySelector('video');

video.addEventListener('seeking', () => {
  console.log('用户正在拖动或跳转，seeking =', video.seeking); // 此时为 true
});

video.addEventListener('seeked', () => {
  console.log('跳转完成，seeking =', video.seeking); // 此时为 false
});

准确检测“拖动中”的实用技巧

由于 seeking 属性变化快、生命周期短，单纯轮询不推荐。更可靠的方式是结合用户交互与事件：

监听进度条 <input type="range"> 的 mousedown + input + mouseup，标记“拖动中”状态；
同时监听 seeking 事件确认浏览器已响应；
用 seeked 或 timeupdate 配合 !video.seeking 判断拖动结束。

例如：

let isUserDragging = false;
const range = document.querySelector('#progress-bar');

range.addEventListener('mousedown', () => isUserDragging = true);
range.addEventListener('mouseup', () => isUserDragging = false);
range.addEventListener('input', () => {
  if (isUserDragging) {
    video.currentTime = range.value;
  }
});

video.addEventListener('seeking', () => {
  if (isUserDragging) {
    console.log('用户正在拖动进度条');
  }
});