Как кэшировать видео mp4 для тега HTML <video>?

Question

У нас есть страница aspx с полным фоновым видео в формате mp4 (9 МБ), похожая на:

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

Это работает, хотя мы замечали на iPad и iPhone каждый раз, когдапользователь возвращается на страницу, где он начинает загружать видеофайл снова.

Мы ожидали, что iOS Safari и Chrome получат его из кэша браузера, чтобы пользователю не пришлось использовать больше пропускной способности.

Есть ли способ заставить его кешировать?

Answer 1

Мне пришлось столкнуться с подобной проблемой. Оказывается, Safari iOS / Desktop по-прежнему не может извлекать видео из кэша при вызове того же URL-адреса через атрибут video src.

Обходной путь, который я нашел, состоял в том, чтобы использовать js fetch API для загрузки всего видео, а затем передать его в тег видео. Это может быть хорошим решением, если вы обслуживаете только небольшие видео, потому что с помощью этого метода вы не сможете начать воспроизведение видео, пока не будут загружены полные данные.

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

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

В отличие от атрибута video src, API извлечения будет получать видеоданные из кэша, если такое же видео уже было извлечено ранее.

Вот демоверсия codepen , которую можно протестировать на настольном / мобильном устройстве Safari (если НЕ в частном режиме).

Я открыл похожую проблему здесь