Отзывчивое разрешение HTML5 видео - PullRequest
8 голосов
/ 21 октября 2011

Я пишу простую веб-страницу с использованием адаптивного веб-дизайна, поэтому мультимедийные запросы CSS3 обслуживают различные таблицы стилей в зависимости от разрешения экрана. Для простоты, скажем, есть версия для iPhone и версия для ПК. Я использую тег видео html5 для показа видео, и я бы хотел показывать видео 720p, когда сайт доступен с рабочего стола, и видео меньшего размера, 320p, при доступе через iphone. Я не прав или нет простого способа сделать это только с помощью html / css? Должен ли я использовать JavaScript для динамического изменения атрибута SRC видео? Если да, каковы лучшие практики? Заранее спасибо.

1 Ответ

9 голосов
/ 17 ноября 2011

Вы можете добавить атрибут media к различным элементам source, что позволит вам показывать разные видео для устройств, которые соответствуют настройкам медиазапроса (как указано в DBUK выше).

Например:

<video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

Обновление & ndash; 24.07.2012 Вероятно, это будет удалено из спецификации .

...