Видео и аудио в HTML5

Видео и аудио в HTML5.

Видео и аудио — неотъемлемые составляющие Сети. В спецификацию HTML5 входят все элементы, необходимые для встраивания мультимедиа в веб-приложения.

В HTML5 появились специальный API-интерфейс для доступа к библиотеке мультимедиа, а также два новых элемента HTML, предназначенные для обработки мультимедиа.

— <video>. Позволяет вставлять в HTML-документы видеофайлы;

— <audio>. Позволяет вставлять в HTML-документы аудиофайлы.

Атрибуты

Спецификация также предусматривает специальные атрибуты для элементов <video> и <audio>:

— src. Определяет URL-адрес встраиваемого файла мультимедиа. Можно также использовать внутри выбранного мультимедийного элемента (<video> или <audio>) элемент <source>, для того чтобы указать несколько источников и позволить браузеру выбрать подходящий формат для воспроизведения;

— controls. Этот атрибут (если он присутствует) активирует элементы управления мультимедиа, предоставляемые браузером по умолчанию. В каждом браузере предусмотрен собственный набор функциональности, включающий в себя, например, кнопки Play (Воспроизвести) и Pause (Пауза) или индикатор прогресса;

— autoplay. Этот атрибут (если он присутствует) заставляет браузер начинать воспроизведение мультимедиа, как только это становится возможным;

— loop. Заставляет браузер бесконечно циклически воспроизводить мультимедиа;

— preload. Подсказывает браузеру, как правильно обрабатывать загрузку медиафайла. Может принимать три значения: none, metadata и auto. Значение none приказывает браузеру подождать с загрузкой файла до тех пор, пока пользователь не инициирует загрузку мультимедиа. Значение metadata заставляет браузер загрузить основную информацию о мультимедийном файле. Значение auto приказывает браузеру начать загрузку файла как можно скорее.

Атрибуты элемента <video>

Некоторые атрибуты относятся только к элементу <video>:

— poster. Позволяет указать изображение, которое будет отображаться на экране до тех пор, пока пользователь не инициирует воспроизведение видео;

— width. Определяет ширину окна видеопроигрывателя (в пикселах);

— height. Определяет высоту окна видеопроигрывателя (в пикселах).

События

Чаще всего используются следующие события этого API:

— progress. Срабатывает периодически и информирует о прогрессе загрузки медиафайла;

— canplaythrough. Срабатывает в момент, когда становится понятно, что медиафайл целиком можно воспроизвести без перерывов;

— canplay. Срабатывает, когда медиафайл готов к воспроизведению. Но, в отличие от предыдущего события, готовностью к воспроизведению считает загрузку всего лишь пары кадров;

— ended. Срабатывает, когда воспроизведение мультимедиа завершается;

— pause. Срабатывает, когда пользователь приостанавливает воспроизведение;

— play. Срабатывает в момент начала воспроизведения;

— error. Срабатывает при возникновении ошибки. Событие доставляется в элемент <source> (если таковой существует), соответствующий источнику медиафайла, вызвавшего ошибку.

Методы

Чаще всего используются следующие методы этого API:

— play(). Запускает или возобновляет воспроизведение медиафайла;

— pause(). Приостанавливает воспроизведение;

— load(). Загружает медиафайл в динамические приложения;

— canPlayType(™n). Позволяет узнать, поддерживается данный формат файла браузером или нет. Если браузер не способен воспроизвести медиафайл, он возвращает пустую строку; в противном случае возвращает строку maybe или probably в зависимости от того, какова вероятность успешного воспроизведения файла.

Свойства

Чаще всего используются следующие свойства этого API:

— paused. Возвращает значение true, если воспроизведение мультимедиа приостановлено или еще не начиналось;

— ended. Возвращает значение true, если видео было воспроизведено до конца;

— duration. Возвращает продолжительность мультимедиа в секундах;

— currentTime. Может как возвращать, так и принимать значение. Оно либо информирует о текущей позиции воспроизведения медиафайла, либо устанавливает новую позицию, с которой продолжается воспроизведение;

— error. Возвращает значение ошибки в случае, если произошел сбой;

— buffered. Предоставляет информацию о том, какая часть файла уже загружена в буфер. Возвращаемое значение представляет собой массив, содержащий данные обо всех загруженных фрагментах мультимедиа. Если пользователь переходит к части медиафайла, которая еще не была загружена, браузер продолжает загрузку с этой позиции. Для доступа к элементам массива можно использовать атрибуты end() и start(). Например, код buffered. end(0) вернет продолжительность (в секундах) первой загруженной части мультимедиа, содержащейся в буфере.

К слову, если возможности HTML5 вы собрались использовать для организации видеонаблюдения – без закупки специализированного оборудования на сайте не обойтись.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *