divside
@divside
Chupapi Munyanyo

Как НЕ грузить десктопный video на мобильном устройстве?

У меня на сайте на 1м блоке есть видео, оно стоит на автозапуске. Необходимая "фича". Видео одной пропорции для разрешений от 1920 до 768 (т.е для горизонтальной плоскости). Однако ниже уже идут мобилки - вертикальные 414, 375, 320. Соотв. моё горизонтальное видео уже не подходит и я буду подгружать туда уже отдельно смонтированное, вертикальное.

Вопрос: Есть ли корректный способ заставить браузер на мобильном устройстве НЕ грузить видео которое предназначено для десктопа, а только то, что я сделал специально для мобилки?

Да, понятно про display none, но браузер в таком случае грузит сразу 2 элемента, просто 1 не показывает. Т.е трафик все равно кушается. Также понятно что я могу создавать в DOM через JS нужный мне div, однако как это правильней реализовать, если JS - defer? А если загружу JS перед DOM - он логично выдаст ошибку, т.к не найдет селектора, ибо они еще не загрузились. Да, можно поставить отсрочку на выполнение, но интернет у всех разный и не угадаешь..

Если делать через Js defer, то сначала загрузится покажется одно видео, потом удалится, и загрузится второе. Т.к это первый блок - пользователь это увидит. Получится что вёрстка "прыгнет" (видео подменится), а этого очень хочется избежать. Прелодер ставить ну вообще не хочется

Поможет ли конструкция preload = "none"

PS:
Уже читал похожий вопрос на хабре, там речь почти про это же. + решение откровенно старое с jquery и мне оно не совсем подходит, т.к есть "прыжки"
  • Вопрос задан
  • 197 просмотров
Решения вопроса 1
@archelon
у меня так:
<video id="myVideo" src="" muted playsinline autoplay loop poster="/media/poster.jpg"></video>


document.addEventListener('DOMContentLoaded', function () {
  const myVideo = document.getElementById('myVideo'); 

  if (myVideo) {
    setMyVideoSource();
  }

  function setMyVideoSource() {
    if (window.innerHeight < window.innerWidth) {
      myVideo.setAttribute('src', '/media/video-desktop.mp4');
      myVideo.load();
      myVideo.play();
    } else if (window.innerHeight > window.innerWidth) {
      myVideo.setAttribute('src', '/media/video-mobile.mp4');
      myVideo.load();
      myVideo.play();
    }
  }
});


в else if можно добавить условия для разных разрешений.
например,
else if (window.innerWidth > 640 && window.innerHeight > window.innerWidth) 
else if (window.innerWidth < 641 && window.innerHeight > window.innerWidth)


также можно дополнительно повесить эту функцию на onresize
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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