如何使用JavaScript在指定位置点击range类型input元素，实现Chrome插件视频进度条控制

直接调用input_slider.click()无法触发进度条跳转的核心原因是：range类型输入框、以及你用到的emby-slider自定义滑块的点击跳转逻辑，依赖鼠标点击事件携带的坐标信息来计算跳转的百分比位置，你直接调用无参数的click()方法不会携带坐标参数，因此无法触发对应逻辑。

可以通过模拟带坐标的完整鼠标事件实现指定位置点击，代码如下：

/**
 * 点击range滑块指定百分比位置
 * @param {HTMLInputElement} slider 目标range元素
 * @param {number} percent 要跳转的百分比，取值范围0-100
 */
function clickSliderAtPercent(slider, percent) {
  // 校验百分比取值范围
  percent = Math.max(0, Math.min(100, percent));
  const sliderRect = slider.getBoundingClientRect();
  // 计算目标点击坐标
  const clickX = sliderRect.left + sliderRect.width * (percent / 100);
  const clickY = sliderRect.top + sliderRect.height / 2;

  // 构造通用事件参数
  const eventOpts = {
    clientX: clickX,
    clientY: clickY,
    bubbles: true,
    cancelable: true,
    view: window
  };
  // 依次触发鼠标按下、弹起事件，匹配自定义滑块的监听逻辑
  slider.dispatchEvent(new MouseEvent('mousedown', eventOpts));
  slider.dispatchEvent(new MouseEvent('mouseup', eventOpts));
  
  // 兜底逻辑：主动设置滑块值并触发对应事件，兼容极端场景
  slider.value = percent;
  slider.dispatchEvent(new Event('input', { bubbles: true }));
  slider.dispatchEvent(new Event('change', { bubbles: true }));
}

使用示例：

// 先获取滑块元素
const input_slider = document.querySelector(".videoOsdPositionSlider");
// 跳转到30%的进度位置
clickSliderAtPercent(input_slider, 30);

// 原有暂停逻辑可正常使用
const pause_button = document.querySelector(".videoOsd-btnPause");
pause_button.click();

注意事项 #

• 若代码在Chrome插件content script中执行，需要确保执行时播放器DOM已完全加载，可通过DOM加载监听、定时轮询等方式判断元素是否存在，避免获取到undefined。
• 上述代码已适配emby自定义滑块的事件监听规则，可直接在emby相关播放器页面使用。
• 如果需要按具体时长跳转，可先获取视频总时长，计算对应百分比后再传入函数即可。

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