HTML5视频Seeking事件的精确追踪与优化策略

const video = document.querySelector('video'); // 假设页面中有一个video元素

// 状态管理对象
const seekStatus = {
  start: null,    // 拖动开始时间
  end: null,      // 拖动结束时间
  isSeeking: false // 标记当前是否处于拖动状态
};

// seeking事件处理器
const seekingHandler = () => {
  // 只有当isSeeking为false时，才认为是一次新的拖动开始
  if (!seekStatus.isSeeking) {
    seekStatus.start = Math.floor(video.currentTime); // 记录开始时间
    seekStatus.end = null; // 重置结束时间
    seekStatus.isSeeking = true; // 设置isSeeking为true
    console.log(`Seek Start: ${seekStatus.start}`);
    // 这里可以发送拖动开始的分析请求
    // sendRequest('seeking_start', { time: seekStatus.start });
  }
};

// seeked事件处理器
const seekedHandler = () => {
  // 只有当isSeeking为true时，才认为是一次拖动结束
  if (seekStatus.isSeeking) {
    seekStatus.end = Math.floor(video.currentTime); // 记录结束时间
    seekStatus.isSeeking = false; // 重置isSeeking为false

    // 避免记录没有实际变化的拖动（例如，用户点击但未移动）
    if (seekStatus.start !== seekStatus.end) {
      console.log(`Seek End: ${seekStatus.end}, Duration: ${seekStatus.end - seekStatus.start}s`);
      console.log("Full Seek Data:", seekStatus);
      // 这里可以发送拖动结束的分析请求，包含开始和结束时间
      // sendRequest('seeking_end', seekStatus);
    } else {
      console.log("Seeked without position change, ignored.");
    }
    // 重置seekStatus，为下一次拖动做准备
    seekStatus.start = null;
    seekStatus.end = null;
  }
};

// 绑定事件监听器
video.addEventListener('seeking', seekingHandler);
video.addEventListener('seeked', seekedHandler);

/**
 * 防抖函数
 * @param {Function} func 要执行的函数
 * @param {number} delay 延迟时间（毫秒）
 * @returns {Function} 防抖后的函数
 */
const debounce = (func, delay) => {
  let timeoutHandle = -1; // 定时器ID

  return (...args) => {
    if (timeoutHandle !== -1) {
      clearTimeout(timeoutHandle); // 如果在延迟时间内再次触发，则清除前一个定时器
    }
    // 设置新的定时器，在延迟后执行函数
    timeoutHandle = setTimeout(func, delay, ...args);
  };
};

// 将seekedHandler进行防抖处理，例如设置300毫秒的延迟
const debouncedSeekedHandler = debounce(seekedHandler, 300);

// 移除原有的seeked事件监听，绑定防抖后的处理器
video.removeEventListener('seeked', seekedHandler); // 如果之前已绑定，先移除
video.addEventListener('seeked', debouncedSeekedHandler);

/**
 * 节流函数
 * @param {Function} func 要执行的函数
 * @param {number} wait 间隔时间（毫秒）
 * @returns {Function} 节流后的函数
 */
function throttle(func, wait) {
  let last = window.performance.now(); // 记录上次执行时间

  const throttled = function(...args) {
    const now = window.performance.now();

    // 如果距离上次执行时间超过了间隔，则执行函数
    if (now - last >= wait) {
      func(...args);
      last = now; // 更新上次执行时间
    }
  };

  return throttled;
}

// 将seekedHandler进行节流处理，例如每300毫秒最多执行一次
const throttledSeekedHandler = throttle(seekedHandler, 300);

// 移除原有的seeked事件监听，绑定节流后的处理器
video.removeEventListener('seeked', seekedHandler); // 如果之前已绑定，先移除
video.addEventListener('seeked', throttledSeekedHandler);