JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

img.onmouseover = function {

this.src = this.getAttribute("data-rollover");

};

img.onmouseout = function {

this.src = this.getAttribute("data-rollout");

};

}

});

21.2.

Работа с аудио- и видеопотоками

Стандарт HTML5 определяет новые элементы

<audio>

и

<video>,

которые теоретически так же просты в использовании, как элемент

<img>

. В броузерах с поддержкой стандарта HTML5 больше не нужно использовать дополнительные расширения (такие как Flash), чтобы внедрить в свои HTML-документы аудио- и видеоклипы:

<audio src="background_music.mp3"/>

<video src="news.mov" width=320 height=240/>

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

<source>,

чтобы указать несколько источников мультимедийных данных в различных форматах:

<audio id="music">

<source src="music.mp3" type="audio/mpeg">

<source src="music.ogg" type='audio/ogg; codec="vorbis">

</audio>

Обратите внимание, что элементы

<source>

не имеют содержимого: они не имеют закрывающего тега </source>, и от вас не требуется завершать их последовательностью символов

/>

.

Броузеры, поддерживающие элементы

<audio>

и

<video>,

не будут отображать их содержимое. Тогда как броузеры, не поддерживающие их, отобразят это содержимое. Чтобы решить эту проблему, можно вставить внутрь содержимое для обратной совместимости (например, элемент

<object>,

который вызывает расширение Flash):

<video id="news" width=640 height=480 controls preload>

<!-- В формате WebM для Firefox и Chrome -->

<source src="news.webm" type='video/webm; codecs="vp8, vorbis'">

<!-- В формате H.264 для IE и Safari -->

<source src="news.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2'">

<!--

Для совместимости с расширением Flash -->

<object width=640 height=480 type="application/x-shockwave-flash"

data="flash_movie_player.swf">

<!-- Здесь можно указать параметры настройки проигрывателя Flash -->

<!-- Текстовое содержимое, используемое в самом худшем случае -->

<div>Элємeнт video не поддерживается и расширение Flash не установлено.</div>

</object>

</video>

Элементы

<audio>

и

<video>

поддерживают атрибут

controls

. Если он присутствует (или соответствующее JavaScript-свойство имеет значение true), они будут отображать элементы управления, включая кнопки запуска на воспроизведение и паузы, регулятор громкости и т. д. Но кроме этого, элементы

<audio>

и

<video>

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

<audio>

и

<video>

предоставляют практически один и тот же прикладной интерфейс (единственное отличие между которыми состоит в том, что элемент

<video>

имеет свойства

width

и

height

), поэтому большая часть того, что рассказывается далее в этом разделе, в равной степени относится к обоим элементам.

Несмотря на раздражающую необходимость определять мультимедийные данные в нескольких форматах, возможность воспроизводить звук и видеоизображение родными средствами броузера без использования дополнительных расширений является новой мощной особенностью, добавленной стандартом HTML5. Обратите внимание, что обсуждение проблемы поддержки кодеков и совместимости броузеров выходит далеко за рамки этой книги. В следующих подразделах мы сосредоточимся исключительно на методах JavaScript, предназначенных для работы с аудио- и видеопотоками.

Конструктор Audio

Элементы

<audio>

не имеют визуального представления в документе, если не установить атрибут

controls

. И так же, как имеется возможность создавать неотображаемые изображения с помощью конструктора

Image,

механизм поддержки мультимедиа, определяемый стандартом HTML5, позволяет создавать аудиоэлементы с помощью конструктора

Audio,

передавая ему аргумент с URL-адресом источника данных: