<b><video id="news" width=640 height=480 controls preload></b>
<b> <!-- В формате WebM для Firefox и Chrome --></b>
<b> <source src="news.webm" type='video/webm; codecs="vp8, vorbis'"></b>
<b> <!-- В формате H.264 для IE и Safari --></b>
<b> <source src="news.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2'"></b>
<b> <!-- Для совместимости с расширением Flash --></b>
<b> <object width=640 height=480 type="application/x-shockwave-flash" </b>
<b> data="flash_movie_player.swf"></b>
<b> <!-- Здесь можно указать параметры настройки проигрывателя Flash --></b>
<b> <!-- Текстовое содержимое, используемое в самом худшем случае --></b>
<b> <div>Элємeнт video не поддерживается и расширение Flash не установлено.</div></b>
<b> </object></b>
<b></video></b>
Элементы
<b><audio></b>
и
<b><video></b>
поддерживают атрибут
<b>controls</b>
. Если он присутствует (или соответствующее JavaScript-свойство имеет значение true), они будут отображать элементы управления, включая кнопки запуска на воспроизведение и паузы, регулятор громкости и т. д. Но кроме этого, элементы
<b><audio></b>
и
<b><video></b>
предоставляют прикладной интерфейс, обеспечивающий широкие возможности управления воспроизведением, с помощью которого вы можете добавлять простые звуковые эффекты в свои веб-приложения или создавать собственные панели управления воспроизведением. Несмотря на различия во внешнем виде, элементы
<b><audio></b>
и
<b><video></b>
предоставляют практически один и тот же прикладной интерфейс (единственное отличие между которыми состоит в том, что элемент
<b><video></b>
имеет свойства
<b>width</b>
и
<b>height</b>
), поэтому большая часть того, что рассказывается далее в этом разделе, в равной степени относится к обоим элементам.
Несмотря на раздражающую необходимость определять мультимедийные данные в нескольких форматах, возможность воспроизводить звук и видеоизображение родными средствами броузера без использования дополнительных расширений является новой мощной особенностью, добавленной стандартом HTML5. Обратите внимание, что обсуждение проблемы поддержки кодеков и совместимости броузеров выходит далеко за рамки этой книги. В следующих подразделах мы сосредоточимся исключительно на методах JavaScript, предназначенных для работы с аудио- и видеопотоками.
Конструктор Audio()
Элементы
<b><audio></b>
не имеют визуального представления в документе, если не установить атрибут
<b>controls</b>
. И так же, как имеется возможность создавать неотображаемые изображения с помощью конструктора
<b>Image(),</b>
механизм поддержки мультимедиа, определяемый стандартом HTML5, позволяет создавать аудиоэлементы с помощью конструктора
<b>Audio(),</b>
передавая ему аргумент с URL-адресом источника данных:
<b>new Audio("chime.wav").play(); // Загрузить и проиграть звуковой эффект</b>
Конструктор
<b>Audio()</b>
возвращает тот же объект, который будет получен при обращении к элементу
<b><audio></b>
в документе или при создании нового аудиоэлемента вызовом
<b>document.сreateElement("audio").</b>
Обратите внимание, что все вышесказанное относится только к аудиоэлементам: механизм поддержки мультимедиа не имеет соответствующего конструктора
<b>Video()</b>
.
**************************************
21.2.1. Выбор типа и загрузка
Если вам потребуется проверить, способен ли мультимедийный элемент воспроизводить мультмедийные данные в определенном формате, передайте М1МЕ-тип этих данных (при необходимости с параметром
<b>codec</b>
) методу
<b>сапРlауТуре</b>
(). Элемент вернет пустую строку (ложное значение), если он не способен проигрывать мультимедийные данные в этом формате. В противном случае он вернет строку «maybe» (возможно) или «probably» (вероятно). Из-за сложной природы аудио-и видеокодеков проигрыватель в общем случае не может сообщить ничего более определенного, чем «probably» (вероятно), не предприняв фактическую попытку загрузить и воспроизвести данные указанного типа:
<b>var а = new Audio();</b>
<b>if (a.canPlayType("audio/wav")) {</b>
<b> a.src = "soundeffect.wav";</b>
<b> a.play();</b>
<b>}</b>
Когда свойству
<b>src</b>
мультимедийного элемента присваивается значение, он начинает процесс загрузки мультимедийных данных. (Этот процесс не продвинется слишком далеко, если не установить в свойстве
<b>preload</b>
значение «auto».) Присваивание нового значения свойству
<b>src</b>
во время загрузки или воспроизведения других мультимедийных данных прервет загрузку или воспроизведение старых данных. Если вместо настройки атрибута
<b>src</b>
вы будете добавлять в мультимедийный элемент элементы
<b><source>,</b>
то он не сможет приступить к выбору нужного элемента, так как не будет знать, когда закончится формирование полного комплекта элементов
<b><source>,</b>
и не сможет начать загрузку данных, пока явно не будет вызван метод
<b>load()</b>
.