Видео и аудио в 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) вернет продолжительность (в секундах) первой загруженной части мультимедиа, содержащейся в буфере.

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

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