Chrome调用video.load()时未重新请求视频源的问题

Chrome 会对相同 URL 的视频资源进行强缓存，调用 video.load() 时会直接读取缓存内容，不会发起新请求；而 Firefox 的缓存策略更宽松，会重新请求资源。

• 给 URL 添加随机参数（最简单的临时解决方法）
  每次视频播放结束后，修改 <source> 的 src，在原 URL 后添加时间戳或随机数，让每次请求的 URL 唯一，绕过浏览器缓存：

  <video class="player" controls muted autoplay>
      <source src="/createReadStream" type="video/mp4">
  </video>
  
  <script>
      const video = document.querySelector('.player');
      const source = video.querySelector('source');
  
      video.onended = () => {
          // 添加时间戳保证URL唯一性
          source.src = `/createReadStream?t=${Date.now()}`;
          video.load();
      };
  </script>
  

• 服务器端设置缓存禁用头
  在 /createReadStream 接口的响应中添加缓存控制头，强制浏览器每次都重新请求：

  Cache-Control: no-cache, no-store, must-revalidate
  Pragma: no-cache
  Expires: 0
  

  这种方法从根源解决缓存问题，不需要修改前端代码，但需要服务器配置支持。

• 重新创建 <source> 元素
  通过移除旧的 <source> 并创建新元素添加到 video 中，再调用 load()，强制浏览器重新识别资源：

  <video class="player" controls muted autoplay>
      <source src="/createReadStream" type="video/mp4">
  </video>
  
  <script>
      const video = document.querySelector('.player');
  
      video.onended = () => {
          // 移除旧source元素
          const oldSource = video.querySelector('source');
          video.removeChild(oldSource);
          // 创建新source元素并配置属性
          const newSource = document.createElement('source');
          newSource.src = '/createReadStream';
          newSource.type = 'video/mp4';
          video.appendChild(newSource);
          // 加载新资源
          video.load();
      };
  </script>
  

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