Начало статьи

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

Нужно отметить, что разработчики в процесее создания flash-плейеров, заинтересованы, прежде всего, в создании собственных пользовательских интерфейсов, которые будут обладать основными функциями: «воспроизведение», «пауза», «стоп» и настройка громкости. Задумка состоит в том, чтобы представить эти функциии в браузерах, добавив поддержку внедрения видео и аудио и осуществлять управление воспроизведением с помощью DOM API.

Новые элементы "video" и "audio" позволяют очень просто решить эту задачу. Большинство API распределяются между этими двумя элементами, с той лишь разницей, связанной с различием между визуальными и невизуальными медиа-ресурсами.

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

Самый простой способ подключения видео элементов на сайт это использование тега "video", а также разрешение браузеру использовать пользовательский интерфейс по умолчанию. Логическое свойство "controls" позволяет определить нужно или не нужно использовать пользовательский интерфейс по умолчанию.

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

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

Так же, очень просто подключить на страницу и аудио элементы, используя тег "audio". Большинство свойств элементов "audio" и "video" одинаковы, однако в силу очевидных причин, у элемента аудио отсутствуют свойства ширины, высота и картинки по умолчанию.

Download song

HTML 5 включает также элемент "source", позволяющий определить путь к альтернативным видео и аудио файлам, которые браузер может выбрать исходя из того формата, который он поддерживает. Свойство media можно использовать для указания истоничка ресурса, основываясь на ограниченных возможностях устройства воиспроизведения и для указания типа ресурса и типа кодека. Отметим, что когда используется элемент "source", аттрибут "src" должен быть исключен из родительского аудио и видео элемента или данные альтернативные пути будут проигнорированы.




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

Для разработчиков, которые хотят больше контроля над пользовательским интерфейсом, чтобы сделать его соответсвующим общему дизайну веб-страницы, расширения API позволяют использовать несколько методов и событий, позволяющих скрипту управлять вопсроизведением медиа-ресурса. Простейшие методы это: <strong>play()</strong>, <strong>pause()</strong>, и установка <strong>currentTime</strong> для возвращения к началу. 
<blockquote><code>
<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>
</code></blockquote>

Существует также множество других видео и аудио элементов и расширений API, не затронутых в этой статье. Более подробно вы сможете <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video">прочесть об этом в текущей спецификации HTML 5</a>
</habracut>

Что нового в HTML 5.0? Часть 2: Внедрение аудио и видео элементов.