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

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

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

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

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

21.2.1. Выбор типа и загрузка

Если вам потребуется проверить, способен ли мультимедийный элемент воспроизводить мультмедийные данные в определенном формате, передайте М1МЕ-тип этих данных (при необходимости с параметром codec) методу сапРlауТуре. Элемент вернет пустую строку (ложное значение), если он не способен проигрывать мультимедийные данные в этом формате. В противном случае он вернет строку «maybe» (возможно) или «probably» (вероятно). Из-за сложной природы аудио-и видеокодеков проигрыватель в общем случае не может сообщить ничего более определенного, чем «probably» (вероятно), не предприняв фактическую попытку загрузить и воспроизвести данные указанного типа:

  var а = new Audio;
  if (a.canPlayType("audio/wav")) {
   a.src = "soundeffect.wav";
   a.play;
  }

Когда свойству src мультимедийного элемента присваивается значение, он начинает процесс загрузки мультимедийных данных. (Этот процесс не продвинется слишком далеко, если не установить в свойстве preload значение «auto».) Присваивание нового значения свойству src во время загрузки или воспроизведения других мультимедийных данных прервет загрузку или воспроизведение старых данных. Если вместо настройки атрибута src вы будете добавлять в мультимедийный элемент элементы <source>, то он не сможет приступить к выбору нужного элемента, так как не будет знать, когда закончится формирование полного комплекта элементов <source>, и не сможет начать загрузку данных, пока явно не будет вызван метод load.

21.2.2. Управление воспроизведением

Самыми важными методами элементов <audio> и <video> являются методы рlау и pause, которые запускают и останавливают воспроизведение:

  // Когда документ будет загружен, запустить фоновое проигрывание мелодии
  window.addEventListener("load", function {
   document.getElementById("music").play;
   }, false);

Помимо возможности запустить и остановить проигрывание звука или видео имеется возможность выполнить переход к требуемому месту в мультимедийных данных установкой свойства currentTime. Это свойство определяет время в секундах, к которому должен быть выполнен переход, и его можно устанавливать в процессе проигрывания данных или во время паузы. (Свойства initialTime и duration ограничивают диапазон допустимых значений свойства currentTime; подробнее об этих свойствах рассказывается ниже.)

Свойство volume определяет уровень громкости как числовое значение в диапазоне от 0 (минимальная громкость) до 1 (максимальная громкость). Свойству muted может быть присвоено значение true, чтобы выключить звук, или false, чтобы продолжить воспроизведение с установленным уровнем громкости.

Свойство playbackRate определяет скорость проигрывания. Значение 1,0 соответствует нормальной скорости. Значения выше 1 соответствуют «ускоренному воспроизведению вперед», а значения от 0 до 1 - «замедленному воспроизведению вперед». Отрицательные значения предполагают проигрывание звука или видео в обратном направлении, но на момент написания этих строк броузеры не поддерживали такую возможность. Элементы <audio> и <video> также имеют свойство defaultPlaybackRate. Всякий раз, когда вызывается метод рlау, значение свойства defaultPlaybackRate присваивается свойству playbackRate.