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

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 изначально надеялись установить некий единый формат видео, который бы поддерживали все. К сожалению, производители браузеров не смогли договориться о едином формате.

Оглавление книги