We have an aspx page with full page background mp4 video (9MB) similar to:
https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
It is working though we've noticed on iPad and iPhone every time a user navigates back to the page it starts to download the video file again.
We were expecting that iOS Safari and Chrome would get it from the browser cache so the user wouldn't have to use more bandwidth.
Is there a way to force it to cache?
I had to deal with a similar issue. It turns out that Safari iOS/Desktop is still not able to pull video from cache when calling the same URL through video src attribute.
The workaround I found was to use js fetch API to download full video, then stream it into video tag. This one could be a good solution if you only serve small videos, because with this method you can't start playing the video before full data has been downloaded.
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's a codepen demo that can be tested in Safari desktop/mobile (when NOT in private mode).
I opened a similar issue here