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

Question

Жан

html , javascript , css

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

Каким образом можно оптимизировать загрузку видео на мобильных устройствах, чтобы браузер не загружал контент, предназначенный для десктопных устройств, а только видео для мобильных? Как можно реализовать эту задачу без "прыжков" вёрстки с использованием JS, учитывая отложенную загрузку этого скрипта?

23 июня 2024 г. 3:41

Ответы на вопрос 2

Похожие вопросы

Answer 1

Существует несколько способов избежать загрузки десктопного элемента на мобильном устройстве:

1. Медиа-запросы: можно использовать CSS медиа-запросы, чтобы скрыть десктопный элемент на мобильных устройствах. Например, с помощью свойства `display: none;` для элемента при достижении определенного разрешения экрана.

```css
@media screen and (max-width: 768px) {
  .desktop-element {
    display: none;
  }
}
```

2. Атрибуты srcset и sizes: при загрузке изображений на сайт можно использовать атрибуты `srcset` и `sizes`, которые позволяют браузеру выбирать оптимальное изображение в зависимости от размера экрана устройства.

3. JavaScript: можно использовать JavaScript для динамического добавления и удаления элементов, в зависимости от размера экрана устройства. Однако, учитывая отложенную загрузку скрипта, это может замедлить загрузку страницы.

Для оптимизации загрузки видео на мобильных устройствах можно следовать следующим рекомендациям:

1. Использовать HTML5 тег video: для загрузки видео на сайт рекомендуется использовать HTML5 тег `<video>`, который позволяет браузеру лучше управлять процессом воспроизведения видео.

2. Предоставить несколько версий видео: создать несколько версий видео с разным разрешением и битрейтом, чтобы браузер мог выбрать наиболее подходящую версию, исходя из характеристик устройства и скорости интернет-соединения.

3. Оптимизировать код и размер видео: перед загрузкой видео на сайт, рекомендуется оптимизировать его размер и кодеки, чтобы уменьшить объем файла и уменьшить время загрузки.

4. Использовать lazy loading: применить lazy loading для видео, чтобы оно загружалось только при необходимости, когда пользователь доходит до видео на странице.

5. Проверить совместимость с мобильными устройствами: перед публикацией видео на сайте, убедитесь, что оно корректно отображается и воспроизводится на различных мобильных устройствах и браузерах.

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

Answer 2

у меня так: 
 <video id="myVideo" src="" muted playsinline autoplay loop class="intro__video" 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