如何为 HTML <video> 标签缓存 mp4 视频？

Question

我们有一个带有全页背景 mp4 视频 (9MB) 的 aspx 页面，类似于：

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

尽管我们在 iPad 和 iPhone 上注意到每次用户导航回页面时它都可以正常工作，但它会再次开始下载视频文件。

我们期望 iOS Safari 和 Chrome 会从浏览器缓存中获取它，这样用户就不必使用更多带宽。

有没有办法强制它缓存？

Answer 1

我不得不处理类似的问题。事实证明，当通过 video src 属性调用相同的 URL 时，Safari iOS/Desktop 仍然无法从缓存中提取视频。

我发现的解决方法是使用 js fetch API 下载完整视频，然后将其流式传输到视频标签中。如果您只提供小视频，这可能是一个很好的解决方案，因为使用这种方法，您无法在下载完整数据之前开始播放视频。

const videoRequest = fetch("/path/to/video.mp4")
    .then(response => response.blob());

videoRequest.then(blob => {
    video.src = window.URL.createObjectURL(blob);
}); 

与 video src 属性相反，如果之前已经获取过相同的视频，则 fetch API 将从缓存中获取视频数据。

这是一个codepen 演示，可以在 Safari 桌面/移动设备中进行测试（非私有模式时）。

我在这里打开了一个类似的问题