Как стать автором
Обновить

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

Время на прочтение 3 мин
Количество просмотров 2.1K
Автор оригинала: Lachlan Hunt
Начало статьи

В последние годы размещение аудио и видео ресурсов на страницах веб-сайтов становится все более популярным, и такие проекты как: 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>
Теги:
Хабы:
+24
Комментарии 29
Комментарии Комментарии 29

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн