Safari не получает mp4-видео из кэша, а иногда и время ожидания при загрузке того же ресурса - PullRequest
0 голосов
/ 30 апреля 2019

Я использую приложение VueJS, которое отображает видео в полноэкранном режиме.Я не создаю столько тегов, сколько количество медиафайлов в своей истории: я просто меняю компоненты компонентного видео каждый раз, когда я играю новое видео.

Но похоже, что Safari (для настольных и мобильных устройств) все еще делаетне кэшировать HTML-видео после загрузки: при повторном воспроизведении предыдущего мультимедиа Safari снова загружает ресурс.Вместо того, чтобы получать из кеша, как это делает Chrome.Об этой же проблеме уже сообщалось здесь , но без правильного ответа.

Safari даже останавливает загрузку финального байтового видео (что-то вроде тайм-аута), когда мы быстро возвращаемся назад и впередистория, поэтому история выглядит застрявшей.Вот пример ссылка .

Кто-нибудь знает хорошую альтернативу, позволяющую избежать повторной загрузки видеоданных при каждом воспроизведении в Safari?

1 Ответ

0 голосов
/ 04 мая 2019

Частичное решение

Нашел себе обходной путь, который неплохо работает, если видео небольшого размера - в моем случае все видео размером менее 3 МБ.

Хитрость в том, чтобы использовать 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 (если НЕ в частном режиме).

Pro : видео теперь извлекается из кэша в Safari!

Con : Вы не можете запустить видео, пока не будут загружены полные данные. Вот почему это решение можно использовать только для небольших видео (например, <5 МБ), иначе ваши пользователи могут подождать некоторое время, прежде чем смогут воспроизвести видео. </p>

...