Safari not retrieving mp4 video from cache, and sometimes timeout when downloading the same resource

Question

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.

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 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.

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

Demetriusdemeyer

Answer 1

Partial solution

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

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

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

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

Pro : Video are now pulled from cache in Safari !

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.

Demetriusdemeyer