HTML5 для веб-дизайнеров
Шрифт:
Главная разница между аудио– и видеосодержимым состоит в том, что фильмы по своей природе будут занимать больше места на экране, поэтому, скорее всего, вам стоит определить размеры элемента:
Вы можете выбрать подходящее изображение для видеофайла и указать браузеру, что нужно его отобразить, через атрибут poster (рис. 3.07):
Рис. 3.07. Через
Поле битвы конкурирующих видеоформатов «залито кровью» еще сильнее, чем в мире аудио. Из больших игроков нужно назвать MP4 – по уши увязшего в патентах – и Theora Video (здесь все проще). И снова вам нужно будет указать альтернативные форматы и содержимое, которое выводится в том случае, если HTML5 video не поддерживается:
Авторы спецификации HTML5 изначально надеялись установить некий единый формат видео, который бы поддерживали все. К сожалению, производители браузеров не смогли договориться о едином формате.
Нативный режим
Возможность нативного встраивания видео в веб-страницы – пожалуй, самое заманчивое добавление к HTML со времен введения элемента
Одной из проблем отображения мультимедиа в плагине является то, что содержимое плагина находится в «песочнице», отдельно от всего остального документа. Нативные мультимедиа-элементы в HTML смогут работать в комплексе с остальными браузерными технологиями – JavaScript и CSS. Элементом
Рис. 3.08. Элемент video
Попробуйте-ка сделать это с плагином.
Аудио и видео – долгожданные дополнения к HTML5, но веб – не среда вещания, а интерактивная среда. Самый старый и самый мощный способ обеспечивать интерактивность – формы. В главе 4 мы посмотрим на то, какое обновление в HTML5 получили формы.
4. Веб-формы 2.0
Когда в веб-браузерах появился JavaScript, его немедленно стали использовать для двух задач: изменения картинки при наведении мышью и улучшения форм. Когда же в CSS появился псевдокласс
И эта картина зачастую повторяется. Если какое-то типовое действие достаточно популярно, практически наверняка развитие будет идти так, что вместо того чтобы писать собственный скрипт, достаточно будет более декларативного решения. Вот почему в CSS3 появляется еще больше возможностей для анимации из числа тех, что раньше требовали JavaScript.
Когда дело касается улучшения форм, у CSS есть ряд ограничений. Здесь в дело вступает HTML5. Следуя той же самой проторенной дорожкой от программного решения к декларативному, спецификация HTML5 вводит много новых улучшений форм.
Эти функции изначально были частью спецификации WHATWG, которая называлась Веб-формы 2.0 и основывалась на уже проделанной работе в W3C. Эта спецификация теперь включена в HTML5.
Placeholder
Вот типичная задача, которая часто используется для поисковых форм и обычно решается написанием скрипта для DOM:
1. Если у поля формы нет значения, вставить туда текст-заполнитель.
2. Когда пользователь перемещает фокус на это поле, убрать текст-заполнитель.
3. Если пользователь выходит из поля и в нем по-прежнему нет значения, снова поставить текст-заполнитель.
Текст-заполнитель обычно показывается шрифтом более светлого цвета, чем шрифт самого значения поля формы. Это реализуется с помощью CSS, JavaScript или обоими этими инструментами вместе.
В документе HTML5 вы можете просто использовать атрибут placeholder (рис. 4.01):
Рис. 4.01. «Стряхивать филинов с деревьев» появляется в поле input посредством атрибута placeholder
Атрибут