视频播放器range时间条与currentTime双向更新冲突滑块无法拖动问题

你的代码无法正常拖动滑块，是几个逻辑错误共同导致的：

• 仅将Interval变量赋值为null无法停止定时器，终止定时任务必须调用clearInterval(Interval)，原定时更新逻辑会一直运行。
• 你写的$.when().then()链式调用是同步执行的，刚把Interval设为null立刻就重建了定时器，等于完全没做暂停操作，250ms一次的自动更新会持续把滑块位置拉回视频当前播放时间，自然拖不动。
• 存在变量名大小写bug：定义总时长用的是大写开头的Duration，更新进度的Play函数里写的是小写duration，会导致进度计算错误。
• input事件回调里的then函数内部this指向已经变更，拿不到range控件的正确值，跳转逻辑本身就会失效；且原跳转计算逻辑未匹配range 0-100的取值范围，会跳转到错误的时间点。

最稳定的实现方式是增加拖动状态标记，不需要反复销毁、重建定时器：用户按住滑块拖动时，暂停进度条的自动同步更新；拖动过程中仅实时更新当前时间的文本显示；等用户松开滑块结束拖动时，再跳转到对应播放位置，同时恢复自动同步逻辑。

$(document).ready(function () {
  let Video, Duration, Interval;
  // 拖动状态标记
  let isDragging = false;

  $("#PlayerVideo").on("loadedmetadata", function () {
    Video = $("#PlayerVideo")[0];
    Duration = Video.duration;
    // 格式化总时长
    const hours = Math.floor(Duration / 3600);
    const mins = Math.floor((Duration % 3600) / 60);
    const secs = Math.floor(Duration % 60);
    $("#durTime").html(`${hours}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`);

    // 启动定时进度更新
    Interval = setInterval(Play, 250);
  });

  // 滑块按下时标记为拖动状态
  $("#TimeRange").on("mousedown pointerdown", function () {
    isDragging = true;
  });

  // 拖动过程中仅更新时间显示，不触发视频跳转
  $("#TimeRange").on("input", function () {
    if (!isDragging) return;
    const targetTime = Number($(this).val()) * Duration / 100;
    const hours = Math.floor(targetTime / 3600);
    const mins = Math.floor((targetTime % 3600) / 60);
    const secs = Math.floor(targetTime % 60);
    $("#curTime").html(`${hours}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`);
  });

  // 拖动结束时执行跳转，恢复自动同步
  $("#TimeRange").on("mouseup pointerup change", function () {
    if (!isDragging) return;
    isDragging = false;
    const targetTime = Number($(this).val()) * Duration / 100;
    Video.currentTime = targetTime;
  });

  function Play() {
    // 拖动状态下不更新滑块位置，避免和拖动操作冲突
    if (isDragging) return;
    Video = $("#PlayerVideo")[0];
    const CurTime = Video.currentTime;
    const hours = Math.floor(CurTime / 3600);
    const mins = Math.floor((CurTime % 3600) / 60);
    const secs = Math.floor(CurTime % 60);
    $("#curTime").html(`${hours}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`);
    // 同步滑块位置，修正原变量大小写bug
    $("#TimeRange").val((CurTime / Duration) * 100);
  }
});

• 用状态标记控制自动更新逻辑的执行，不需要反复操作定时器，性能更高、逻辑更易维护。
• 拖动过程中不修改视频播放位置，也不让定时任务覆盖滑块位置，保证拖动操作流畅无卡顿。
• 修复了原代码中this指向错误、变量名大小写不一致、跳转时间计算错误、定时器无法真正停止的所有问题。
• 新增时间文本补零逻辑，时分秒不足两位时自动补0，符合常规播放器的显示规范。

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