如何在微软浏览器中检测视频Scrubbing结束事件

这个问题确实是IE和Edge浏览器在媒体事件处理上的典型差异，我之前也遇到过类似的情况。核心问题在于IE/Edge不会像Chrome/Firefox那样在拖拽结束后自动触发play事件，而且拖拽过程中seeking和seeked会成对频繁触发，没有一个明确的"拖拽结束"信号。不过我们可以通过定时器+状态跟踪的方式来间接解决这个问题。

实现思路 #

拖拽过程中，seeking事件会连续触发（每次拖拽进度条的微小移动都会触发），而每次seeking后IE/Edge会立即触发seeked。我们可以利用这个特点：设置一个延迟定时器，只要有新的seeking事件就清除定时器；当拖拽结束后，不再有新的seeking，定时器就会到期，这时我们就可以判定拖拽结束，恢复之前的播放状态。

完整代码实现 #

var video = document.querySelector("video");
var wasPlaying = false; // 记录拖拽前的播放状态
var scrubTimeout = null;
// 延迟阈值：可根据实际体验调整，100-200ms比较合适
const SCRUB_END_DELAY = 150;

// 跟踪播放状态
video.addEventListener("play", function () {
  wasPlaying = true;
  console.log("Starting process");
});

video.addEventListener("pause", function () {
  wasPlaying = false;
  console.log("Pausing process");
});

// 处理拖拽开始（seeking事件）
video.addEventListener("seeking", function () {
  console.log("Pausing process during scrub");
  // 清除之前的定时器，因为拖拽还在进行中
  if (scrubTimeout) {
    clearTimeout(scrubTimeout);
  }
});

// 处理seeked事件，判断拖拽是否结束
video.addEventListener("seeked", function () {
  // 设置新的定时器，延迟后检查是否真的结束拖拽
  scrubTimeout = setTimeout(function () {
    // 如果拖拽前视频处于播放状态，恢复播放并重启进程
    if (wasPlaying) {
      video.play().then(() => {
        console.log("Resuming process after scrub end");
      }).catch(err => {
        // 处理播放失败的情况，比如浏览器自动阻止自动播放
        console.error("Failed to resume play:", err);
      });
    }
  }, SCRUB_END_DELAY);
});

关键细节说明 #

1. 状态跟踪：用wasPlaying变量记录拖拽开始前视频的播放状态，确保拖拽结束后能正确恢复之前的状态。
2. 定时器逻辑：每次seeking触发时清除定时器，避免在拖拽过程中误判为结束；只有当最后一次seeked后，超过设定延迟没有新的seeking，才会触发拖拽结束的处理逻辑。
3. 兼容性处理：调用video.play()时使用then/catch，因为现代浏览器（包括Edge的新版本）对自动播放有严格限制，避免出现播放失败的情况。
4. 延迟阈值调整：SCRUB_END_DELAY的取值需要平衡响应速度和误判概率，150ms是比较通用的数值，如果觉得响应慢可以适当减小，比如100ms；如果出现误判（拖拽中就触发恢复），可以增大到200ms。

这个方案不仅能解决IE/Edge的拖拽结束检测问题，同时也能兼容Chrome/Firefox等其他浏览器，实现统一的行为。

内容的提问来源于stack exchange，提问作者NeilD