@adgjmptwnoma

Как сделать отложенную загрузку видео-фона сайта?

Всем доброго времени суток! Сайт amaio.ru. Поставил видео в шапку чтобы воспроизводилось на телефонах автоматически тоже. Но сайт стал грузиться в три-четыре раза дольше. Preload="none" не помогает. Фрагмент кода:
<video autoplay="autoplay" loop="loop" playsinline="" muted="muted" src="files/uploads/main.mp4" preload="none" class="abs-video abs"></video>
На сайте стоит прелодер, контент показывается когда всё полностью загружено (видео грузит тоже). Как можно этого избежать? Спасибо.
  • Вопрос задан
  • 231 просмотр
Решения вопроса 1
Stalker_RED
@Stalker_RED
autoplay уберите, src сделайте пустым.
<video loop="loop" playsinline="" muted="muted" data-src="files/uploads/main.mp4" preload="none" class="abs-video abs"></video>


Начинайте грузить видео только после полной загрузки DOM или даже после загрузки всех изображений и стилей
document.addEventListener('DOMContentLoaded', function(){ // или 'load', попробуйте что больше подойдет
  const player = document.querySelector('.abs-video');
  player.oncanplay = function(){ player.play() }; // вызовется, когда загрузится хотя-бы несколько первых кадров
  player.src = player.dataset.src; // подставляем правильный src
})




Если видео тяжелое, то можно заморочиться, и сконвертить его c флагом -movflags faststart, что позволит начать проигрывание еще до полной загрузки файла.
Как-то так https://superuser.com/a/424024
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы