Safari无法从缓存中检索mp4视频，下载相同资源时有时会超时 [英] Safari not retrieving mp4 video from cache, and sometimes timeout when downloading the same resource

问题描述

我正在运行一个VueJS应用程序，该应用程序显示视频的全屏故事.在我的故事中，我创建的标签数量没有媒体数量那么多:每次播放新视频时，我只是在更改分量视频的来源.

I'm running a VueJS application that displays a full screen story of videos. I don't create as many tag as number of media in my story : I'm just changing component video sources each time I play a new video.

但是看起来Safari(台式机和移动设备)加载后仍然不缓存HTML视频:当我再次播放以前的媒体时，Safari再次下载了资产.而不是像Chrome那样从缓存中获取数据. 已经在此处报告了相同的问题，但没有正确的答案.

But it looks like Safari (Desktop & mobile) still does not cache HTML video once loaded : when I'm playing again a previous media, Safari is downloading again the asset. Instead of getting from cache like Chrome does. The same issue has already been reported here but sill no correct answer.

当我们在故事中来回快速浏览时，Safari甚至停止下载最终字节的视频(产生某种超时)，因此故事看起来很卡住. 这是一个示例链接.

Safari even stops downloading the final bytes video (producing a sort of timeout) when we go back and forth quicky in the story, so the story looks stuck. Here's an example link.

有没有人知道避免在Safari每次播放时重新下载视频数据的好选择?

Does anyone know a good alternative that avoids re-downloading video data at each play on Safari ?

推荐答案

部分解决方案

找到了自己的解决方法，如果视频尺寸较小，效果很好-在我的情况下，所有视频均小于3Mb.

Found myself a workaround that works pretty well if video is small size - all video are less than 3Mb in my case.

诀窍是使用js fetch API下载完整视频，然后将其流式传输到视频代码中.

The trick is to use js fetch API to download full video, then stream it into video tag.

const videoRequest = fetch("/path/to/video.mp4")
    .then(response => response.blob());

videoRequest.then(blob => {
    video.src = window.URL.createObjectURL(blob);
}); 

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

Contrary to video src attribute, fetch API will get video data from cache if the same video was already fetched before.

这里有一个 codepen演示，可以在Safari台式机/移动设备上进行测试(如果不在私有模式).

Here a codepen demo that can be tested in Safari desktop/mobile (when NOT in private mode).

专业版:视频现在已从Safari中的缓存中拉出！

Pro : Video are now pulled from cache in Safari !

缺点:只有下载了完整的数据后，您才能开始播放视频.这就是为什么此解决方案只能用于小型视频(例如<5Mb)的原因，否则您的用户可能要等待一段时间才能播放视频.

Con : You can't start the video until full data has been downloaded. That's why this solution can be used only for small video (like < 5Mb), else your users may wait a while before being able to play the video.

这篇关于Safari无法从缓存中检索mp4视频，下载相同资源时有时会超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！