Анонс HTML 5. Часть 2: Видео и аудио

Видео и Аудио

В последнее время видео и аудио в Интернете становится все более востребованным. Такие сайты как YouTube, Viddler, Revver, MySpace, и десятки других позволяют любому опубликовать видео и аудио. Однако, поскольку в HTML в настоящее время отсутствуют необходимые средства для успешного внедрения и управления компонентами мультимедиа, многие сайты используют Flash чтобы предоставить пользователям функции контроля воспроизведения аудио и видео. Несмотря на то, что мультимедиа в вебе можно воспроизводить с помощью различных плагинов (таких, как QuickTime, Windows Media и т.д.), Flash в настоящее время является единственным среди широко распространенных плагинов, который обеспечивает кросс-браузерное решение совместимое с требуемым API.

Как видно на примере различных Flash-проигрывателей, авторы заинтересованы в разработке собственных пользовательских интерфейсов, которые в предоставляют пользователям функиции воспроизведения, паузы, остановки, поиска, и регулировки громкости. Планируется реализовать эту функцию в браузерах, добавив поддержку внедрения видео и аудио и управления воспроизведением через DOM API с помощью скриптов.

Новые элементы управления видео и аудио очень упростят это. Большинство интернет-ориентированых АПИ имеют разницу лишь в обрабатываемом типе медиаданных: визуальных и не визуальных.

Опера и WebKit были созданы с частичной поддержкой видео. Вы можете скачать экспериментальную сборку Opera или последнюю сборку WebKit чтобы убедится в этом. В Opera включена поддержка Ogg Theora, а WebKit поддерживает все форматы, которые поддерживает QuickTime, в том числе кодеки сторонних производителей.

Простейший способ контроллировать воспроизведение видео и аудио данных — это реализовать в браузере собственный интерфейс управления воспроизведением. Настройки использования интерфейса браузера зависят от определенного булевого значения.

<video src="video.ogv" controls poster="poster.jpg" 
width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

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

Вставить в страницу аудио так же просто. Большинство параметров являются общими для воспроизведения видео и аудио, хотя, по очевидным причинам, у аудио отсутствуют параметры ширины, высоты, и параметр заставки.

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

HTML 5 имеет тег для указания альтернативных форматов, которые браузер может воспроизводить основываясь на типе формата или на кодеке, который этот формат поддерживает

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

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp" 
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">

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

Для авторов, которые хотят иметь больший контроль над пользовательским интерфейсом, обширный API предоставляет несколько методов и событий, позволяющие скриптам контроллировать воспроизведение. Простейшие способ — это использование использования play(), pause(), и currentTime для возврата в начало. Следующий пример показывает их применение.

<video src="video.ogg" id="video"></video>
<script>
  var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>

   <button type="button" onclick="video.currentTime = 0;">
   << Rewind</button>

Существует много параметров API, для видео и аудио компонентов, которые не были описаны здесь. Для получения дополнительной информации, Вы должны свериться с текущей спецификацией проекта.