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

Question

[DIVSIDE]

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

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

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

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

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

PS:
Уже читал похожий вопрос на хабре, там речь почти про это же. + решение откровенно старое с jquery и мне оно не совсем подходит, т.к есть "прыжки"

Comments

[Ivan Ustûžanin]

а чем атрибут media на <source> внутри <video> не угодил?

[DIVSIDE]

IvanU7n, а причем тут он? С видео не работает как с картинками

[Ivan Ustûžanin]

DIVSIDE, не знаю как в действительности, но на MDN есть пример как раз этого: https://developer.mozilla.org/en-US/docs/Web/HTML/...

[DIVSIDE]

IvanU7n, это не совсем про это. Это подгрузка другого файла, если основной по какой-то причине не загрузился или не поддерживается.

Я был бы рад если бы video работало как picture, но оно не работает также

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
  <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

[Ivan Ustûžanin]

DIVSIDE, я же прямую ссылку на пример привёл:

<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

и описание

This example demonstrates how to offer an alternate source file for viewports above a certain width. When a user's browsing environment meets the specified media condition, the associated element is chosen. The contents of its src attribute are then requested and rendered. If the media condition does not match, the browser will move on to the next in the list. The second option in the code below has no media condition, so it will be selected for all other browsing contexts.

вроде как именно то, что нужно

[DIVSIDE]

IvanU7n, Офигеть, действительно. Прошу прощения.
Я пару лет назад пытался так сделать и у меня ничего не выходило.. Или может сафари такое не поддерживает - хз. Сейчас с винды сижу

[DIVSIDE]

IvanU7n, Есть у этого способа вроде незначительный, но все же минус. При смене разрешения окна браузера по ширине, не происходит замена видео. Т.е оно работает при прогрузке страницы


Хоть люди и не меняют ширину браузера как правило, но все же, останется то видео, которое загрузилось изначально.

Answer 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

Comments

[DIVSIDE]

И ничего не прыгает?

[Wispik]

DIVSIDE, чтобы не прыгало, задай блоку с видео размеры

[DIVSIDE]

Wispik, Я не могу задать блоку размеры, т.к они априори разные. Ведь ради этого и делается смена видео

[Wispik]

DIVSIDE, ну судя по вопросу ты размеры видео то знаешь. Вот и сделай через медиа запросы разные размеры для блока видео, под разные размеры экрана. И через js подставляй туда видео

[DIVSIDE]

Wispik, Я знаю пропорции. Размеры выставляются автоматически

[Wispik]

DIVSIDE, я не понимаю, что тебе мешает задать размеры, зная пропорции, через тот же calc, например
Либо просто через height, просто побольше медиа запросов сделать

[DIVSIDE]

Wispik, В зависимости от ширины видео, меняется и его высота. Автоматически. В этом смысл, чтобы как раз не прописывать размеры и не делать object-fit cover. Ибо на видео анимированный текст и он не должен обрезаться. Т.е что на 1920 у меня видео будет условно 16/9, что на 1280.

На мобилке все тоже самое, только вертикальное

[Wispik]

DIVSIDE, ещё раз, можно использовать CALC
Если пропорции 16/9, то высота это ширина разделить на 1.77

[DIVSIDE]

Wispik, Даже если я выставлю размеры для видео, это не уберет "прыжка". Сначала покажется одно видео на какое-то время, потом отработает js (удалить этот блок и создаст новый), и только потом покажет второе видео.

+ js сработает только когда загрузится DOM, т.е мы сначала будем втыкать секунд 5 в первое видео, и только потом получим второе.

Проблема то не в размерах. А в "перезагрузке" исходника видео. И вопрос в том, как изначально туда пихнуть нужный мне исходник, или минимизировать заметность подмены для юзера

[Wispik]

DIVSIDE, ну так оберни видео в див и ему уже задай высоту.
Вообщем смотри, если хочешь чтобы вёрстка не прыгала, то у блока должна быть задана высота, по другому никак. И не важно видео там или что-то другое

[DIVSIDE]

Wispik, ещё раз говорю. Мне не важен прыжок высоты блока, этого у меня и нет т.к само собой моё видео обёрнуто. Мне важен факт перезагрузки видео. Смены одно на другое. А вы мне упорно про размеры. Прочитайте внимательнее перед тем как что-то отвечать

[archelon]

js сработает только когда загрузится DOM, т.е мы сначала будем втыкать секунд 5 в первое видео, и только потом получим второе.

в моем примере у видео не зря пустой атрибут src.
сначала пользователь увидит обложку видео (атрибут poster), а затем загруженное видео

[DIVSIDE]

archelon, Да, я совсем забыл про DOMContentLoadedвместо load
+ пустой src очень умно. Спасибо за подсказку

Покажете сайт? Просто с телефона охота посмотреть

[DIVSIDE]

IvanU7n настоятельно рекомендую глянуть последний коммент под вопросом! у меня инсайд

[DIVSIDE]

serega danet, сейчас юзеры не переворачивают телефоны на сайтах) а даже если - пусть грузится. А если не надо, это правится добавлением брейкпоинта в js