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

Question

[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" media="(max-width: 1280px)" type="video/mp4">
</video>

Друзья, подскажите, будет ли так работать, как написано? Теоретически ищу возможность уменьшить объем подгружаемых данных на мобильном устройстве, разница 40%. Можно ли так делать или как лучше? Хочу в зависимости от ширины экрана загружать разные видео файлы. Да, можно на JS подменять src, но можно ли чисто на HTML?

У меня видео подгружает и показывает, и вроде даже верно подгружает, но я не уверен. :)

Answer 1

[Ivan Ustûžanin]

должно работать: https://developer.mozilla.org/en-US/docs/Web/HTML/...

Comments

[Pavstyuk]

Да. Спасибо. Документация спасет мир. Нашел ровно свой кейс.

Answer 2

[Nik Faraday]

Это + это. Далее запускаете проект и смотрите, будет ли оно работать или нет...

На крайняк берёте олдовый метод с блокнотом (Надеюсь, он у вас есть), закидуете туда html раметку, меняете расширение на .html (Только сначала документ нужно будет закрыть) и открываете БРАУЗЕРОМ

Вот вам, два способа проверить вашу интуицию, будет ли эти ЧЕТЫРЕ строчки работать так, как вы думаете или нет

Comments

[Pavstyuk]

Вы наверно так шутите?

[Nik Faraday]

Pavstyuk, ну, почти. Просто я хотел указать на несерьёзность вопроса, т.к. вы говорите, что у вас всё работает, но просите это протестировать других людей

[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>

В любом случае спасибо за вашу реакцию на мой скромный вопрос.