Chrome请求第二个视频流却播放首个视频的.NET Core应用问题

我之前也碰到过类似的Chrome专属媒体资源问题，结合你的描述——其他浏览器正常、旧版Chrome没问题、清缓存刷新都没用只有新窗口能解决——这大概率是Chrome近期更新后，对媒体会话或进程级缓存的策略做了调整，导致它错误复用了第一个视频的资源会话。下面是几个亲测有效的解决方案：

1. 给视频请求加动态缓存破折号参数 #

Chrome现在对媒体资源的缓存判定非常严格，哪怕视频实际内容变了，只要URL没变化，它就可能复用之前的缓存或媒体会话。你可以在生成视频播放URL时，附加一个唯一的动态参数（比如视频ID的哈希或者当前时间戳）：

// .NET Core后端生成播放URL时添加缓存破折号
var uniqueCacheKey = $"{videoId}-{DateTime.UtcNow.Ticks}";
var videoStreamUrl = $"/api/video/stream/{videoId}?cb={uniqueCacheKey}";

这样每次切换视频时，请求URL都是独一无二的，Chrome会将其视为全新资源，不会再复用之前的缓存。

2. 彻底销毁并重建HTML5 Video元素 #

如果只修改video元素的src属性无效，那可以尝试完全替换掉video元素，彻底切断Chrome对旧视频资源的引用：

// 前端切换视频的函数
function loadNewVideo(newStreamUrl) {
  const container = document.getElementById('video-wrapper');
  // 清理旧视频资源
  const oldPlayer = document.getElementById('video-player');
  if (oldPlayer) {
    oldPlayer.pause();
    oldPlayer.remove();
    // 释放浏览器缓存的Blob/ObjectURL（如果用到的话）
    if (oldPlayer.src.startsWith('blob:')) {
      URL.revokeObjectURL(oldPlayer.src);
    }
  }
  // 创建新的video元素
  const newPlayer = document.createElement('video');
  newPlayer.id = 'video-player';
  newPlayer.src = newStreamUrl;
  newPlayer.controls = true;
  newPlayer.preload = 'metadata';
  container.appendChild(newPlayer);
}

这种方式能强制Chrome重新初始化媒体会话，避免它“记住”之前的视频内容。

3. 后端添加严格的缓存控制响应头 #

在你的.NET Core视频流接口中，返回响应时添加禁用缓存的头信息，明确告诉Chrome不要缓存该媒体资源：

// 在视频流Action中设置响应头
[HttpGet("stream/{videoId}")]
public async Task<IActionResult> StreamVideo(string videoId)
{
    // 你的视频流逻辑...
    Response.Headers.CacheControl = "no-cache, no-store, must-revalidate";
    Response.Headers.Pragma = "no-cache";
    Response.Headers.Expires = "0";
    // 返回视频流...
}

不过要注意，这种方式会让所有视频请求都不缓存，可能影响重复播放同一视频的性能，所以优先推荐第一种缓存破折号的方案。

4. 检查Media Session API的使用（如果用到的话） #

如果你的应用使用了Chrome的Media Session API来控制媒体播放，切换视频时要记得更新媒体会话的元数据，避免Chrome混淆不同视频：

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: '新视频标题',
    artwork: [{ src: '新视频缩略图URL' }]
  });
}

确保媒体会话的信息和当前播放的视频保持一致，防止Chrome错误复用旧会话的资源。

你可以先试试第一种方案，它实现最简单，对性能影响也最小。如果还是不行，再尝试第二种重建元素的方式，这两种基本能解决绝大多数Chrome的媒体缓存复用问题。

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