c# - 如何为 HTML 标签缓存 mp4 视频？

Question

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

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

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

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

有没有办法强制缓存？

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);
}); 

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

这是一个 codepen demo可以在 Safari 桌面/移动设备中测试(当不在私有(private)模式下时)。

我打开了类似的问题here