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>

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

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

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

data="flash_movie_player.swf">

<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-адресом источника данных:

new Audio("chime.wav").play(); // Загрузить и проиграть звуковой эффект

Конструктор Audio() возвращает тот же объект, который будет получен при обращении к элементу <audio> в документе или при создании нового аудиоэлемента вызовом document.сreateElement("audio"). Обратите внимание, что все вышесказанное относится только к аудиоэлементам: механизм поддержки мультимедиа не имеет соответствующего конструктора Video().

**************************************