如何让HTML <video>元素预加载完整视频至缓存？

首先明确：preload="auto"只是浏览器的预加载提示，而非强制指令。浏览器会根据网络状况、视频文件大小等因素自主决定预加载的内容量，所以出现仅缓存30秒的情况是浏览器默认策略导致的。

要实现完整预加载视频到缓存，可以通过以下方法：

手动Fetch完整视频并转为Blob #

通过Fetch API主动下载完整视频文件，将其转为Blob对象后绑定到video元素的src属性，这样视频会被完整加载到浏览器内存中，支持任意位置快进。

示例代码：

const video = document.getElementById('my-video');
// 替换为你的视频源地址
fetch('@Model.Video.SourceLink')
  .then(res => res.blob())
  .then(blob => {
    const blobUrl = URL.createObjectURL(blob);
    video.src = blobUrl;
    // 视频加载完成后释放Blob URL，避免内存泄漏
    video.addEventListener('loadeddata', () => {
      URL.revokeObjectURL(blobUrl);
    });
  })
  .catch(err => console.error('视频加载失败:', err));

注意事项 #

• 跨域限制：如果视频资源来自不同域名，服务器必须配置CORS响应头（如Access-Control-Allow-Origin: *），否则Fetch请求会被浏览器拦截。
• 性能影响：若视频体积过大，完整预加载会消耗大量用户带宽和内存，可能导致页面卡顿，需根据实际场景权衡使用。
• 用户体验优化：可以在视频加载过程中添加加载动画或提示文本，避免用户误以为视频无法播放。

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