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

Для создания адаптивной загрузки видео в зависимости от ширины экрана, можно использовать HTML5 video элемент в сочетании с CSS и JavaScript.

HTML5 video элемент позволяет встраивать видео на веб-страницу. Он имеет встроенную поддержку множества форматов видео, таких как MP4, WebM и Ogg.

В первую очередь, вам нужно добавить HTML5 video элемент на вашу веб-страницу. В минимальном виде, это может выглядеть следующим образом:

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Этот код создает video элемент с идентификатором "myVideo" и добавляет несколько источников видео. Если браузер не поддерживает тег video или ни один из форматов видео, будет отображено сообщение "Your browser does not support the video tag."

Далее, вам нужно определить несколько стилей CSS для адаптивной загрузки видео. Например, вы можете использовать медиа-запросы для определения разных стилей в зависимости от ширины экрана:

#myVideo {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  #myVideo {
    max-width: 50%;
  }
}

@media screen and (max-width: 480px) {
  #myVideo {
    max-width: 30%;
  }
}

В этом примере, video элемент будет иметь максимальную ширину 100%, и будет адаптироваться к размеру экрана. При ширине экрана менее 768px, video элемент будет иметь максимальную ширину 50%. При ширине экрана менее 480px, video элемент будет иметь максимальную ширину 30%.

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

var video = document.getElementById("myVideo");

function changeVideoSource() {
  if (window.innerWidth < 768) {
    video.setAttribute("src", "video-mobile.mp4");
  } else {
    video.setAttribute("src", "video-desktop.mp4");
  }
}

changeVideoSource();

В этом примере, JavaScript проверяет ширину окна браузера и изменяет источник видео в соответствии с этим. В случае, если ширина окна браузера меньше 768px, будет загружен video-mobile.mp4, в противном случае будет загружен video-desktop.mp4. Вы можете использовать любые имена источников видео в соответствии с вашими потребностями.

Обратите внимание, что этот код работает на фронтенде и требует поддержки JavaScript у пользователя.