Video.js拖动进度条后视频从头播放问题求助

可能原因及解决方案 #

1. 服务器不支持范围请求（最常见原因） #

如果视频服务器未开启字节范围请求（Range Requests），浏览器无法请求指定时间点的视频数据，拖动进度条后只能从头加载播放。

验证方法：

• 打开浏览器开发者工具（F12）→ 网络面板
• 播放视频，找到对应视频请求，查看响应头是否包含 Accept-Ranges: bytes
• 无该响应头则说明服务器不支持范围请求

解决方式：

• Nginx：确保配置mp4模块，在server或location块中添加：

  location ~ \.mp4$ {
      mp4;
  }
  

• Apache：启用mod_headers和mod_expires模块，添加配置支持字节范围请求

2. 代码中重复触发视频加载 #

你的changeDisplayedVideoSource方法里，调用src()后手动执行了load()，但Video.js的src()方法本身会自动触发加载流程，重复调用load()可能导致播放器状态异常，引发进度条拖动问题。

修改后的代码：

const changeDisplayedVideoSource = (newSrc) => {
    // 先暂停当前播放
    selectedVideoPlayer.pause();
    
    // 设置新视频源，单个源直接传对象即可，无需数组
    selectedVideoPlayer.src({
        src: newSrc,
        type: 'video/mp4'
    });

    // 监听metadata加载完成后再播放，确保播放器已准备就绪
    selectedVideoPlayer.one('loadedmetadata', () => {
        const videoInfo = selectedVideoPlayer.currentHeight() + 'x' + selectedVideoPlayer.currentWidth()
        console.log(videoInfo);
        selectedVideoPlayer.play();
    });
};

3. 视频文件编码问题 #

若视频文件编码不符合标准（比如缺少关键帧索引），Video.js无法正确解析进度信息，也会导致拖动后从头播放。

解决方式：

• 使用FFmpeg重新编码视频，生成标准MP4文件：

  ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4
  

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