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

Question

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

На сайте стоит прелодер, контент показывается когда всё полностью загружено (видео грузит тоже). Как можно этого избежать? Спасибо.

Answer 1

[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

Comments

[adgjmptwnoma]

Не совсем понимаю принцип работы data-src. Видео убралось. Могли бы Вы дополнительно помочь? Спасибо.

[Stalker_RED]

adgjmptwnoma, смысл в том, что сразу src не указываем, а уже после полной загрузки страницы указываем.

[adgjmptwnoma]

Stalker_RED, посмотрите, пожалуйста, amaio.ru. Чёрный экран вместо видео. Я где-то ошибку допускаю.

[Stalker_RED]

adgjmptwnoma, мой косяк, нельзя там стрелочную функцию использовать.

[adgjmptwnoma]

Stalker_RED, Помогло! Очень благодарен Вам. Я решение искал больше месяца..