HTML5 для веб-дизайнеров

Предположим, что вместе с аудиофайлом идет его транскрипция. Вот так не нужно размечать эти данные:

audio controls

source src="witchitalineman.ogg" type="audio/ogg"

source src="witchitalineman.mp3" type="audio/mpeg"

I am a lineman for the county…

/audio

Транскрипция в этом примере будет видна только тем браузерам, которые поддерживают элемент audio. Размечать незвуковое содержимое таким образом никак не поможет глухому пользователю с хорошим браузером. Кроме того, так называемое содержимое для технологий специальных возможностей часто полезно для всех – так что зачем его прятать?

audio controls

source src="witchitalineman.ogg" type="audio/ogg"

source src="witchitalineman.mp3" type="audio/mpeg"

/audio

I am a lineman for the county…

Video

Если родное для браузера воспроизведение аудио – это воодушевляюще, то перспектива родного отображения видео в браузере заставляет веб-разработчиков пускать слюнки от нетерпения. По мере того как пропускная способность интернет-каналов возросла, видеосодержимое начало становиться все более и более популярным. Сейчас главная технология для показа видео в вебе – Flash-плагин. Но HTML5 может все это изменить.

Элемент video работает примерно так же, как элемент audio. У него есть необязательные атрибуты autoplay, loop и preload. Вы можете указать расположение видеофайла либо через атрибут src элемента video, либо с помощью элементов source, вложенных внутри открывающих и закрывающих тегов video. Вы можете разрешить браузеру отобразить пользовательский интерфейс с помощью атрибута controls или написать свои собственные управляющие элементы.

Главная разница между аудио– и видеосодержимым состоит в том, что фильмы по своей природе будут занимать больше места на экране, поэтому, скорее всего, вам стоит определить размеры элемента:

video src="movie.mp4" controls width="360" height="240"

/video

Вы можете выбрать подходящее изображение для видеофайла и указать браузеру, что нужно его отобразить, через атрибут poster (рис. 3.07):

video src="movie.mp4" controls width="360"height="240" poster="placeholder.jpg"

/video

^{Рис. 3.07. Через атрибут poster показывается картинка-заполнитель}

Поле битвы конкурирующих видеоформатов «залито кровью» еще сильнее, чем в мире аудио. Из больших игроков нужно назвать MP4 – по уши увязшего в патентах – и Theora Video (здесь все проще). И снова вам нужно будет указать альтернативные форматы и содержимое, которое выводится в том случае, если HTML5 video не поддерживается:

video controls width="360" height="240"poster="placeholder.jpg"

source src="movie.ogv" type="video/ogg"

source src="movie.mp4" type="video/mp4"

object type="application/x-shockwave-flash"width="360" height="240"data="player.swf?file=movie.mp4"

param name="movie"value="player.swf?file=movie.mp4"

a href="movie.mp4"Скачать фильм/a

/object

/video

Авторы спецификации HTML5 изначально надеялись установить некий единый формат видео, который бы поддерживали все. К сожалению, производители браузеров не смогли договориться о едином формате.

Нативный режим

Возможность нативного встраивания видео в веб-страницы – пожалуй, самое заманчивое добавление к HTML со времен введения элемента img. Большие игроки, как, например Google, не стесняются выражать свой энтузиазм на этот счет. Вы можете взглянуть на то, что они приготовили для YouTube, по адресу: http://youtube.com/html5.

Одной из проблем отображения мультимедиа в плагине является то, что содержимое плагина находится в «песочнице», отдельно от всего остального документа. Нативные мультимедиа-элементы в HTML смогут работать в комплексе с остальными браузерными технологиями – JavaScript и CSS. Элементом video можно не только управлять через JavaScript, можно также назначать ему стили (рис. 3.08).

^{Рис. 3.08. Элемент video с примененными стилями}

Попробуйте-ка сделать это с плагином.

Аудио и видео – долгожданные дополнения к HTML5, но веб – не среда вещания, а интерактивная среда. Самый старый и самый мощный способ обеспечивать интерактивность – формы. В главе 4 мы посмотрим на то, какое обновление в HTML5 получили формы.