Вход/Регистрация
HTML5 для веб-дизайнеров
вернуться

Джереми Кит

Шрифт:

Модель содержимого элемента

audio
очень удобна для предоставления «запасного варианта» содержимого. Запасное содержимое – не то же самое, что содержимое для технологий специальных возможностей.

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

<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="#">Скачать фильм</a>

</object>

</video>

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

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

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

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

  • Читать дальше
  • 1
  • ...
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: