Для раздела сайта мне нужно реализовать адаптивное решение для полноценного видео (100% высоты и ширины). Видео должно воспроизводиться автоматически при отключении звука, а элементы управления скрыты.
Несмотря на то, что пользователи не имеют контроля над видео, я хочу сохранить удобство работы с пользователями, чтобы мобильные пользователи соответствующим образом получали качество мобильного видео и так далее для пользователей планшетов или настольных компьютеров. Что касается художественного руководства, то, скорее всего, мобильные пользователи получат вертикальное видео 576p, например (вместо использования этого Html5 видео-фона, держите центр видео в центре )
Так что я ищучто может быть правильным подходом для решения этой проблемы, я знаю, что может быть много библиотек JS для программной обработки такого рода вещей. Я просто не уверен, должен ли я выбрать один или написать свой собственный код (проверьте размер области просмотра и выберите источник на лету, возможно, качество отката видео в качестве прогрессивного улучшения с помощью Network Information API).
Если бы я использовал изображения, я бы, вероятно, использовал элемент img с атрибутами srcset для управления отзывчивостью и художественным направлением.
Псевдокод
Псевдокод, чтобы проиллюстрировать то, что я пытаюсь достичь. Любая помощь будет оценена, спасибо.
<video
controls crossorigin playsinline autobuffer autoplay muted
poster="//self-hosted/video-thumbnail.jpg"
id="player"
data-src-576="//self-hosted/video-576p.mp4"
data-src-720p="//self-hosted/video-vertical-720p.mp4"
data-src-1080="//self-hosted/video-vertical-1080.mp4" >
</video>