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