@InfernalOwl

Видео — для десктопа, картинка — для мобильного устройства?

Привет всем ;)
Есть короткий вопрос:
В шапке на сайте проигрывается простое видео с помощью следующего кода:
<video id="video_1" width="100%" height="100%" loop autoplay>
				<source type="video/mp4" src="/video/2.mp4" />
				<source type="video/webm" src="/video/2.mp4" />
				</video>

Как сделать так, чтобы видео проигрывалось только на большом экране? Например если экран заходящего пользователя меньше 500pix - он получает просто статичную картинку на том же месте (хотя это не освободит от проблем владельцев планшетов, а хотелось бы).
Ну или какое-то иное условие, которое будет выдавать просто картинку для всех тех, кто не за компом.
P.S.
Страница таргетно-маркетинговая, просьба не осуждать за такую подлость, как видео (да и оно всего 2Мб). :)
P.P.S.
Предполагаю, что тут должен быть замешан JS..
  • Вопрос задан
  • 687 просмотров
Решения вопроса 3
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Я конечно могу ошибаться, и нужно проверить это.
Но насколько я помню, display none не скрывает элементы от загрузки и отрисовки.
Т.е. браузер все равно получит их, не важно, скрыто видео или нет.
А посему, у меня только одно предложение.
Динамически, в зависимости от размера экрана, через jQuery создавать элемент DOMa.
В таком случае, лишний трафик точно не будет грузиться.
Так как скрипт просто не обработает свое действие.

Upd:
Проверил, и правда, display none никак не сказывается на загрузке.
Видео все равно грузится, но уже фоном и трафик жрет.

jQuery(document).ready(function(){
      var w = screen.width;
      if (w >= '1000') {
        $('.fullscreen-bg__video').append('<source src="video/video.webm" type="video/webm">');
      } else {
        if (w < '1000') {
          $('.fullscreen-bg__video').append('<div id="third">Картинка</div>');
        }
      }
    });

Это мое решение. На разрешении больше 1000 пикселей, динамически создается блок с видео. А на меньше 1000 создается блок с картинкой. Классы и стили прописать можете самостоятельно.
Можно довесить проверку на load и resize, если нужно.

Upd2:

Вот результат работы скрипта. Видео грузится только больше 1000.

585a742c077f4d19b59baf024e41d22b.png661a6ab169a3424d8880f4b9720f977d.png
А вот с display none для блока с видео, самого видео и вообще обводки.

a33a164c29aa430389bd1993284eeb01.png6c87b19618934c5796ec3696ae2badcf.png
По консоли последнего скрина видно, что видео продолжает грузиться.
Последние строки, там смотрим грузится видео или нет.

UpdLast:
Честно говоря, я сам люблю видео ставить на первый экран лендингов.
Никогда не задумывался над этим.
Теперь буду только так внедрять) Чтобы посетители не ругались)))

Спасибо за вопрос)

PPS:

HTML

<video id="video_1" width="100%" height="100%" loop autoplay>
        
</video>


JS

jQuery(document).ready(function(){
      var w = screen.width;
      if (w >= '1000') {
        $('#video_1').append('<source type="video/mp4" src="/video/2.mp4" /><source type="video/webm" src="/video/2.mp4" />'); // в блок с ID video_1 добавляем код вставки видео
      } else {
        if (w < '1000') {
          $('#video_1').append('<div class="image"><img src="img/video.jpg" alt=""></div>'); // тут нужно прописать путь до картинки и название дива, который создается
        }
      }
    });


Вроде так. По вашему коду.
Ответ написан
zorro76
@zorro76
С помощью media queries вы можете прописать все что угодно для того или иного расширения экрана, я например ставлю видео с ютуба для всех, кроме экранов меньше 500px, им же можно что угодно и ссылку на ютуб, и картинку фоном, и вообще блок убрать
Ну как-то так jsfiddle
Ответ написан
@Cyber_bober
@media (max-width:500px;){
#video_1{
display:none;
}

.bgimage{
display:block;}

}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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