鼠标X轴控制视频时移卡顿问题优化方案咨询

我实现了一个通过鼠标X轴移动控制视频时间偏移的功能，但视频更新缓慢、存在卡顿。以下是现有代码，求优化流畅度的方案：

HTML代码 #

<link rel="stylesheet" href="style.css">

<main>
    <div class="full-viewport-center">
        <video class="vid" autoplay muted loop>
            <source src="https://img.tpx.cz/uploads/video (1080p).mp4">
        </video>
    </div>
</main>

<script src="app.js"></script>

JavaScript代码 #

const video = document.querySelector('.vid');

document.addEventListener('mousemove', function(event) {
    var width = window.innerWidth;
    var mouseX = event.clientX;
    var percentage = (mouseX / width) * 100;
    
    console.log(percentage / 100);
    seekVideo(percentage / 100);
});

function seekVideo(percent) {
    const duration = video.duration;
    const time = duration * percent;
    video.currentTime = time;
}

优化方案 #

1. 节流mousemove事件
   鼠标移动会触发高频事件，每次调用seekVideo会导致视频频繁跳转，引发卡顿。用节流函数限制调用频率（比如每10-20ms执行一次），减少不必要的视频操作：

   const video = document.querySelector('.vid');
   let windowWidth = window.innerWidth;
   
   // 监听窗口大小变化，缓存宽度值
   window.addEventListener('resize', () => {
       windowWidth = window.innerWidth;
   });
   
   // 绑定节流后的鼠标移动事件
   document.addEventListener('mousemove', throttle(function(event) {
       const percentage = event.clientX / windowWidth;
       seekVideo(percentage);
   }, 15));
   
   // 节流函数实现
   function throttle(func, delay) {
       let lastCall = 0;
       return function(...args) {
           const now = Date.now();
           if (now - lastCall >= delay) {
               lastCall = now;
               func.apply(this, args);
           }
       }
   }
   
   function seekVideo(percent) {
       if (!video.duration) return;
       const time = video.duration * percent;
       video.currentTime = time;
   }
   

2. 缓存静态数据
   窗口宽度不会频繁变化，无需每次鼠标移动都重新获取window.innerWidth，通过resize事件更新缓存值即可，减少重复计算。

3. 移除不必要的日志输出
   原代码中的console.log会占用运行性能，调试完成后建议直接删除。

4. 优化视频加载策略

   • 给video标签添加preload="auto"属性，让浏览器提前加载视频内容，减少跳转时的等待：

     <video class="vid" autoplay muted loop preload="auto">
     

   • 确保视频使用浏览器高效支持的编码格式（如H.264），若视频文件过大，可考虑压缩或提供适配带宽的不同版本。

5. 避免自动播放与手动跳转冲突
   原视频的autoplay和loop属性可能与手动跳转逻辑冲突，可在鼠标移动时暂停自动播放，鼠标离开后恢复：

   document.addEventListener('mousemove', throttle(function(event) {
       video.pause();
       const percentage = event.clientX / windowWidth;
       seekVideo(percentage);
   }, 15));
   
   document.addEventListener('mouseleave', () => {
       video.play();
   });
   

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