如何失效或清除HTMLMediaElement/HTMLVideoElement缓冲区以修复音视频不同步问题？

可行解决方案 #

通用HTML5视频适配方案（所有浏览器视频场景通用） #

• 轻量无感知方案：直接执行控制台代码 document.querySelector('video').fastSeek(document.querySelector('video').currentTime)
  这个API会直接指令浏览器从当前播放时间点重新拉取解码音视频数据，丢弃已有的错位缓冲区，不需要修改资源地址，也不会触发404，开销极低，正常只会有几十毫秒的卡顿即可完成音视频对齐。
• 兼容性兜底方案：如果浏览器不支持fastSeek，可以执行两次时间偏移操作：

  const video = document.querySelector('video');
  const curTime = video.currentTime;
  video.currentTime = curTime + 0.1;
  setTimeout(() => video.currentTime = curTime, 50);
  

  手动触发两次seek操作，同样会让浏览器丢弃错位的缓冲数据，重新对齐音视频轨道。
• 终极重置方案：如果上述操作都无效，执行 document.querySelector('video').load()
  这个方法会强制媒体元素重置所有已缓冲数据，重新加载当前绑定的资源，从当前播放位置开始缓冲，100%可以解决缓冲区错位问题，代价是会有1-3秒的加载黑屏时间。

YouTube平台专属快捷操作（无需打开控制台） #

• 快捷键操作：先按一次左方向键回退1秒，再按一次右方向键前进1秒，本质和上面的时间偏移逻辑一致，80%以上的YouTube音视频不同步问题可以通过这个操作解决。
• 清晰度切换操作：在播放器右下角设置面板中切换到任意其他清晰度，再切回原清晰度，YouTube会重新拉取对应清晰度的音视频流，直接废弃之前的错位缓冲区，同步问题会直接解决。

之前修改src失效的原因 #

YouTube的视频资源使用动态生成的Blob URL，URL本身包含了会话鉴权参数、资源分片标识等校验信息，随意追加查询参数或者哈希值会破坏URL的有效性，因此会返回NOT FOUND错误，完全不需要通过修改src的方式实现缓冲区重置。

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