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

Posted 2023-05-08

【中文标题】如何为 HTML <video> 标签缓存 mp4 视频？

【英文标题】：How to cache mp4 video for the HTML <video> tag?

【发布时间】：2019-02-12 16:45:57

【问题描述】：

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

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

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

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

有没有办法强制缓存？

【问题讨论】：

为 mp4 设置了哪些响应标头？它有任何与缓存相关的标头吗？

@Ogge 道歉，但我之前没有使用响应头的经验，所以这对我来说是新的。基本上我们有一个类似于示例的新 aspx webform 页面。如果你的意思是在那个特定的 aspx 页面中放一些东西，我很想知道你的意思。

您可以通过设置不同的响应标头来控制项目的缓存方式，通常您在 web.config 中执行此操作。在 aspx 文件中很难做到。

【参考方案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 demo，可以在 Safari 桌面/移动设备上进行测试（当不在私人模式下时）。

我开了一个类似的问题here

【讨论】：

如果它仅适用于 Safari，您是否考虑过浏览器嗅探仅将该代码提供给 Safari 浏览器？

@user1946932 是的，当然，我是在服务器端做的，但也有很多库供前端使用。