Как верно сделать адаптивную загрузка видео в зависимости от ширины экрана?
<video poster="poster.webp" autoplay muted loop> <source src="videoback-1080.mp4" media="(min-width: 1280px)" type="video/mp4"> <source src="videoback-720.mp4" media="(max-width: 1280px)" type="video/mp4"> </video> |
<video poster="poster.webp" autoplay muted loop> <source src="videoback-1080.mp4" media="(min-width: 1280px)" type="video/mp4"> <source src="videoback-720.mp4" media="(max-width: 1280px)" type="video/mp4"> </video>
Друзья, подскажите, будет ли так работать, как написано? Теоретически ищу возможность уменьшить объем подгружаемых данных на мобильном устройстве, разница 40%. Можно ли так делать или как лучше? Хочу в зависимости от ширины экрана загружать разные видео файлы. Да, можно на JS подменять src, но можно ли чисто на HTML?
У меня видео подгружает и показывает, и вроде даже верно подгружает, но я не уверен. :)
Дополнительно:
должно работать: https://developer.mozilla.org/en-US/docs/Web/HTML/...
- Да. Спасибо. Документация спасет мир. Нашел ровно свой кейс.
Ответы:
Это + это. Далее запускаете проект и смотрите, будет ли оно работать или нет...
На крайняк берёте олдовый метод с блокнотом (Надеюсь, он у вас есть), закидуете туда html раметку, меняете расширение на .html (Только сначала документ нужно будет закрыть) и открываете БРАУЗЕРОМ
Вот вам, два способа проверить вашу интуицию, будет ли эти ЧЕТЫРЕ строчки работать так, как вы думаете или нет
- Вы наверно так шутите?
- Pavstyuk, ну, почти. Просто я хотел указать на несерьёзность вопроса, т.к. вы говорите, что у вас всё работает, но просите это протестировать других людей
- Тестировать я не просил. Меня волновал вопрос грамотности такого подхода.
Вопрос звучал, "как верно сделать". Я знал, что такое подход работает с картинками. Теперь из документации узнал, что он работает и с видео.Код можно упростить, убрав медиа запрос во втором источнике, сделав его по умолчанию.
<video poster="poster.webp" autoplay muted loop> <source src="videoback-1080.mp4" media="(min-width: 1280px)" type="video/mp4"> <source src="videoback-720.mp4" type="video/mp4"> </video>
<video poster="poster.webp" autoplay muted loop> <source src="videoback-1080.mp4" media="(min-width: 1280px)" type="video/mp4"> <source src="videoback-720.mp4" type="video/mp4"> </video>
В любом случае спасибо за вашу реакцию на мой скромный вопрос.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для верной адаптивной загрузки видео в зависимости от ширины экрана, вам нужно использовать тег
Вот пример кода на PHP, который позволит вам добавить адаптивное видео на ваш сайт:
<div class="video-container"> <video controls> Your browser does not support the video tag. </video> </div>
Теперь в CSS вы можете использовать следующий код, чтобы сделать видео адаптивным:
.video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; } .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Этот код обеспечит адаптивное видео, которое будет масштабироваться в зависимости от ширины экрана устройства, на котором открывается ваш сайт.
Не забудьте заменить "video.mp4" на путь к вашему видеофайлу. Также убедитесь, что ваше видео имеет несколько разрешений (например, 720p, 1080p), чтобы браузер мог выбрать наиболее подходящее для текущего экрана устройства.
Надеюсь, этот ответ поможет вам создать адаптивную загрузку видео на вашем сайте!