Как запретить загрузку файлов при определенном разрешении экрана?

Question

[Егор Бадулин]

Есть видеофон на сайте.

<video id="video" poster="img/header-bg.png" autoplay="autoplay" loop="loop" preload="auto">
	<source src="video/h264.mp4" type="video/mp4"></source>
	<source src="video/book.webm" type="video/webm"></source>
</video>

В мобильной версии он отключен, там просто картинка. Как сделать так, чтобы файл вообще не загружался при разрешении ниже, чем 992px? Через display:none файл все равно будет грузиться.

Comments

[Kovalsky]

https://stackoverflow.com/questions/42652058/displ...

[Сергей delphinpro]

Запретить нельзя, разрешить можно.
Отсюда вывод — вставлять разметку только тогда, когда она нужна.

[Froggyweb]

Очень не уверен что видео будет грузится в блок display none.

Answer 1

[Сергей Горячев]

Лучше всего использовать mobiledetect.php
Но вообще, уже обсуждалось ранее в другом вопросе.
Видео — для десктопа, картинка — для мобильного устройства?

Comments

[Егор Бадулин]

Да, это то, что нужно. (Я искал в сети, но эта страница не попадалась). Больше спасибо!

Answer 2

[Abcdefgk]

Нопремер так:

if(document.documentElement.clientWidth <= 992) {
  document.getElementById('video').children[0].src = '';
  document.getElementById('video').children[1].src = '';
} else {
  document.getElementById('video').children[0].src = 'video/h264.mp4';
  document.getElementById('video').children[0].src = 'video/book.webm';
}