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

Question

我们有一个aspx页面，带有完整页面背景mp4视频（9MB），类似于以下链接中的示例：

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

它能够工作，但我们注意到在iPad和iPhone上，每次用户返回该页面时，视频文件都会重新下载。

我们原本期望iOS Safari和Chrome可以从浏览器缓存中获取视频，这样用户就不必使用更多的带宽。

是否有一种方式可以强制将其缓存？

- user1946932

---

MP4文件设置了哪些响应头？它是否有任何缓存相关的头信息？ - Ogge

@Ogge 抱歉，我之前没有处理过响应头的经验，所以这对我来说是新的。基本上，我们有一个类似于示例的新aspx webform页面。如果您指的是在特定的aspx页面中放置某些内容，我很想知道您的意思。 - user1946932

您可以通过设置不同的响应头来控制项目的缓存方式，通常在web.config文件中进行设置。在aspx文件中进行此操作可能会比较困难。 - Ogge

Answer 1

我曾经处理过类似的问题。 结果发现，当通过视频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桌面/移动版（非私密模式下）进行测试。

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

- Nicolas Mercier

---

如果只适用于Safari浏览器，您是否考虑使用浏览器嗅探技术，仅向Safari浏览器提供该代码？ - user1946932

@user1946932 当然可以，我是在服务器端完成的，不过也有很多前端使用的库。 - Nicolas Mercier