Question

我们有一个aspx页面，其中包含完整的背景mp4视频（9MB），类似于：

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下载完整视频，然后将其流式传输到video标签。如果您只播放小型视频，那么这可能是一个不错的解决方案，因为使用这种方法，您无法在下载完整数据之前开始播放视频。

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 demo，可以在Safari桌面/移动设备上进行测试（非私有模式下）。

我打开了一个类似的问题here

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

1 个答案: