Видео и аудио — неотъемлемые составляющие Сети. В спецификацию 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 вы собрались использовать для организации видеонаблюдения – без закупки специализированного оборудования на сайте не обойтись.
Добавить комментарий