HTML5 Баннер Размер видео для полноэкранного режима

Question

У меня есть вопрос относительно следующего:

Мне поручено создать баннер HTML5, который включает в себя видео. Контейнер для видео имеет размеры 300x250 с включенными элементами управления. Присвоенный ему источник также имеет размер 300x250, однако, когда пользователь на рабочем столе просматривает полноэкранное видео на рабочем столе, качество оказывается довольно паршивым, поскольку оно простирается до экрана пользователя.

Вопрос: возможно ли, чтобы размер видео контейнера оставался 300x250px, в то время как назначенный исходный файл имеет гораздо больший размер, поэтому он будет четким при просмотре на настольных устройствах? Есть ли способ показа видео меньшего размера при просмотре на мобильных устройствах методом обнаружения?

Спасибо!

Answer 1

Возможно, что размеры контейнера (width а также height атрибуты) и размеры видео (videoWidth а также videoHeight атрибуты) не совпадают.

Вы можете применить медиа-запросы к source использование элемента media атрибут:

<video width="300" height="250" controls>
  <source src="small.mp4" type="video/mp4" media="screen and (max-width: 480px)">
  <source src="big.mp4" type="video/mp4">
</video>