HTML视频播放器动态切换URL：无中断换源及CORS问题求解

1. 无缝切换视频源（不中断播放、保留缓存） #

直接替换video元素的src属性必然会导致播放中断并重置缓存，要实现无缝切换，需通过MediaSource Extensions (MSE) 手动管理视频数据流：

• 初始化MediaSource对象并关联到video元素，将视频播放的控制权从浏览器默认逻辑转移到自定义代码
• 在旧链接过期前1-2分钟，提前获取新链接，通过Fetch API请求视频片段
• 将新片段的二进制数据流追加到MediaSource的SourceBuffer中，实现播放流的无缝拼接
• 这种方式下，已加载的旧视频片段会保留在浏览器缓存中，不会被清除

示例代码：

const video = document.getElementById('my-video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

let sourceBuffer;
mediaSource.addEventListener('sourceopen', () => {
  // 替换为你的视频编码格式，可通过视频文件的编码信息获取
  sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  // 加载初始视频流
  loadVideoStream(initialVideoUrl);
});

// 提前1分钟刷新链接并加载新流
setInterval(async () => {
  const newUrl = await getUpdatedVideoUrl(); // 你的新链接获取逻辑
  await loadVideoStream(newUrl);
}, 9 * 60 * 1000);

async function loadVideoStream(url) {
  const response = await fetch(url, { mode: 'cors' });
  const reader = response.body.getReader();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    // 等待缓冲区有空闲空间再追加数据
    if (sourceBuffer.updating) {
      await new Promise(resolve => {
        sourceBuffer.addEventListener('updateend', resolve, { once: true });
      });
    }
    sourceBuffer.appendBuffer(value);
  }
}

2. 解决CORS政策问题 #

如果Fetch处理数据流时触发CORS报错，按以下方向处理：

• 自有服务器场景：在视频存储服务器的响应头中添加以下配置：
  • Access-Control-Allow-Origin: 你的前端域名（生产环境避免用*）
  • Access-Control-Allow-Methods: GET, HEAD
  • Access-Control-Allow-Headers: Range（视频播放依赖Range请求实现分段加载）
• 第三方服务器场景：若对方未开放CORS权限，需搭建同源代理服务——前端请求自己服务器的代理接口，由代理服务去请求远程视频并返回数据流，规避跨域限制
• 请求模式检查：确保Fetch请求设置了mode: 'cors'，让浏览器按照CORS规则处理跨域请求

3. 额外优化建议 #

• 预加载时机：提前1-2分钟启动新链接的加载，避免切换时出现卡顿
• 缓存复用：手动维护已加载片段的缓存标识，避免重复加载相同内容
• 错误兜底：添加数据流加载失败的重试逻辑，以及播放中断后的自动恢复机制

内容的提问来源于stack exchange，提问作者Panda -_- dreamer 2.0