同一手机多次访问站点后HTML video标签视频无法播放问题咨询

故障成因 #

• 移动端浏览器媒体缓存配额超限：iOS为主的移动端浏览器对单域名下的媒体资源内存缓存有严格配额限制，多次访问页面时重复加载的视频文件累计占用内存超过阈值后，浏览器会主动拦截后续媒体资源加载，仅渲染首帧静止画面，清除缓存后配额重置即可恢复播放。
• 视频DOM资源泄漏：页面刷新/跳转时未主动释放video节点占用的解码通道、内存资源，多次访问后残留的冗余视频实例占满浏览器分配的媒体资源额度，新实例无法正常解码播放。
• 自动播放策略触发阈值：部分移动端浏览器对单域名下的静默自动播放媒体次数有限制，超过阈值后会收回自动播放权限，仅展示加载完成的首帧。

修复方案 #

• 主动释放视频资源：监听页面生命周期事件，页面卸载/切后台时主动销毁视频实例释放资源，示例代码如下：

// 页面卸载前释放资源
window.addEventListener('beforeunload', () => {
  const video = document.getElementById('waterBackground')
  if (video) {
    video.pause()
    video.removeAttribute('src')
    video.remove()
  }
})
// 页面切回前台时重新加载播放
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    const video = document.getElementById('waterBackground')
    if (video) {
      video.load()
      video.play().catch(() => {})
    }
  }
})

• 配置视频资源缓存策略：给视频资源的响应头添加Cache-Control: max-age=86400, immutable，强制浏览器复用本地磁盘缓存的视频文件，避免每次访问都重复加载到内存缓存区。
• 改用Blob URL加载视频：一次性加载视频文件生成Blob URL复用，避免多次请求产生冗余缓存，示例代码如下：

fetch('../assets/water1-forwards_compressed.mp4')
  .then(res => res.blob())
  .then(blob => {
    const video = document.getElementById('waterBackground')
    video.src = URL.createObjectURL(blob)
    video.playbackRate = 0.8
    // 页面卸载时释放Blob资源
    window.addEventListener('beforeunload', () => URL.revokeObjectURL(video.src))
  })

• 补充video标签属性配置：给video标签添加preload="auto"属性，引导浏览器提前优化资源加载逻辑，减少重复加载产生的资源冗余。

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