HTML5 за 10 минут

Применение аудиовизуальной информации


В HTML5 предоставляется возможность воспроизводить видео- и аудиозаписи с помощью элементов <video> и <audio>.

На момент написания этой книги в большинстве браузеров допускалось воспроизводить видео- и аудиозаписи только в OGG — малоизвестном открытом формате. Правда, видео- и аудиозаписи можно легко преобразовать в этот формат из большинства наиболее распространенных форматов. Хотя в некоторых браузерах все же допускается использовать видео- и аудиозаписи в элементах <video> и <audio> в других форматах.

В этой главе будет показано, как воспроизводить видео- и аудиозаписи формата OGG на веб-странице. Кроме того, будут рассмотрены элементы управления, предназначенные для воспроизведения подобных записей. Для этой цели будут использованы новые для HTML5 элементы <video> и <audio>, применение которых будет продемонстрировано на конкретных примерах.

Совет

Появление элемента <video> ожидалось с большим нетерпением, в частности, потому, что на проигрывателе Apple iPad не воспроизводится Flash-видео, тогда как элемент <video> способен восполнить этот недостаток.

Общее представление об управлении воспроизведением видеозаписей на веб-страницах

Вам предстоит создать пример HTML-документа video.html, приведенного на 8.1. В этом документе воспроизводится видеозапись из файла brtmuseum.ogg, взятого в качестве примера и предварительно преобразованного из формата AVI описанным далее способом, но вы вольны подставить вместо него в исходный код рассматриваемого здесь примера HTML-документа любой другой файл видеозаписи в формате OGG.

Ниже дан краткий обзор программных средств, положенных в основу рассматриваемого в этой главе примера воспроизведения видеозаписей в HTML-доку ментах.

Представление о прикладном программном интерфейсе воспроизведения видеозаписей

У элемента <video> имеется целый ряд атрибутов, перечисленных ниже.

Элемент: <video>

Атрибуты:

♦    autoplay

♦    controls

♦    height

♦    loop

♦    poster

♦    preload

♦    src

♦    width

♦    onerror

Поддерживающие браузеры: Chrome, Opera, Firefox, Safari, Internet Explorer 9

Подробнее с описанием, назначением и возможностями элемента <video> можно ознакомиться на веб-сайте W3C по адресу http://www.w3.org/TR/html5/video.html.

Ниже дается краткий обзор перечисленных выше атрибутов элемента <video>.

Комментарии закрыты