如何优化视频模拟360°视图的拖动Scrubbing，实现实时流畅交互

我尝试通过视频复刻360°图像查看器的体验，目标是让用户点击并拖动视频进行快进或后退，以此模拟3D物体旋转的效果。

当前使用的jQuery实现代码：

$(document).ready(function() {
    let video = $('#product-video')[0];
    let isDragging = false;
    let initialClientX, initialTime, currentX;

    const sensitivity = 0.005;

    function updateVideoTime() {
        if (!isDragging) return;

        const deltaX = currentX - initialClientX;
        video.currentTime = initialTime + (video.duration * (deltaX * sensitivity));

        // Ensure currentTime remains within bounds
        video.currentTime = Math.max(0, Math.min(video.currentTime, video.duration));

        requestAnimationFrame(updateVideoTime);
    }

    $('#product-video').on('mousedown', function(e) {
        e.preventDefault();
        isDragging = true;
        initialClientX = e.clientX;
        initialTime = video.currentTime;

        requestAnimationFrame(updateVideoTime);
    });

    $(document).on('mousemove', function(e) {
        if (isDragging) {
            currentX = e.clientX;
        }
    }).on('mouseup', function() {
        isDragging = false;
    });
});

目前拖动时视频虽会更新，但无法达到近乎实时的效果，鼠标移动与视频更新之间存在明显延迟。我希望让视频Scrubbing尽可能流畅，以还原360°查看器的体验。请问是否有更高效的方法，能更频繁地更新视频播放位置，实现这种实时Scrubbing效果？

以下是几个能直接提升视频拖动流畅度的关键优化点：

1. 禁用视频默认交互干扰 #

浏览器对video元素有默认的拖拽、选中等行为，会抢占事件优先级，添加CSS和事件拦截彻底禁用：

#product-video {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
}

同时在pointerdown事件中补充阻止冒泡：

$('#product-video').on('pointerdown', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // ... 原有逻辑
});

2. 优化时间计算逻辑，减少冗余操作 #

缓存视频时长，避免每次读取DOM属性；同时只在时间差足够大时更新，减少不必要的浏览器渲染：

let videoDuration = 0;
// 视频元数据加载完成后缓存时长
video.onloadedmetadata = function() {
    videoDuration = video.duration;
};

function updateVideoTime() {
    if (!isDragging) return;

    const deltaX = currentX - initialClientX;
    let targetTime = initialTime + (videoDuration * deltaX * sensitivity);
    targetTime = Math.max(0, Math.min(targetTime, videoDuration));
    
    // 仅当时间差超过0.01秒时才更新，避免频繁触发渲染
    if (Math.abs(video.currentTime - targetTime) > 0.01) {
        // 优先使用fastSeek提升效率
        if (video.fastSeek) {
            video.fastSeek(targetTime);
        } else {
            video.currentTime = targetTime;
        }
    }

    requestAnimationFrame(updateVideoTime);
}

3. 替换为Pointer事件，提升响应速度 #

pointermove/pointerdown事件同时支持鼠标和触摸设备，且事件触发优先级高于传统鼠标事件，能减少延迟：

$('#product-video').on('pointerdown', function(e) {
    e.preventDefault();
    e.stopPropagation();
    isDragging = true;
    initialClientX = e.clientX;
    initialTime = video.currentTime;

    requestAnimationFrame(updateVideoTime);
});

$(document).on('pointermove', function(e) {
    if (isDragging) {
        currentX = e.clientX;
    }
}).on('pointerup', function() {
    isDragging = false;
}).on('pointercancel', function() {
    isDragging = false;
});

4. 优化视频本身的加载与编码 #

• 给video标签添加preload="auto"属性，提前加载视频数据：

  <video id="product-video" preload="auto" controls="false" ...></video>
  

• 调整视频编码的关键帧间隔（设置为1秒以内），让浏览器能更快定位到指定时间点的帧，推荐使用H.264编码格式。

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