Начало статьи – Что нового в HTML 5.0? Часть 1

В последние годы размещение аудио и видео ресурсов на страницах веб-сайтов становится все более популярным, и такие проекты как: 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" mce_src="video.ogv" controls poster="poster.jpg"width="320" height="240">
<a href="video.ogv" mce_href="video.ogv">Download movie</a>
</video>

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

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

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

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

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

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

<video src="video.ogg" mce_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, не затронутых в этой статье. Более подробно вы сможете прочесть об этом в текущей спецификации HTML 5