代码之家 › 专栏 › 技术社区 › user1946932

如何缓存HTML<video>标签的MP4视频?

html5-video html5 asp.net ios c#

0

user1946932 · 技术社区 · 7 年前

我们有一个具有完整页面背景的ASPX页面MP4视频(9MB),类似于:

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

尽管我们在iPad和iPhone上注意到,每次用户返回页面时,它都会再次开始下载视频文件。

我们希望iOS Safari和Chrome可以从浏览器缓存中获取它,这样用户就不必使用更多的带宽。

有没有办法强迫它缓存?

0 回复 | 直到 7 年前

1

0

Nicolas Mercier 7 年前

我不得不处理一个类似的问题。结果表明,当通过video-src属性调用同一个URL时,safari iOS/desktop仍然无法从缓存中提取视频。

我发现的解决方法是使用JSFetch 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