Работа с медиа элементами

При работе с медиаконтентом следует не забывать, что браузер может воспроизводить только медиа, закодированное строго ограниченным набором кодеков. Среди которых:

Аудиокодеки:

- AAC;

- MPEG-3;

- Ogg Vorbis.

Видеокодеки:

- H.264;

- VP8;

- Ogg Theora.

Так же, не следует забывать, что определённые браузеры могут воспроизводить контент, закодированный строго определёнными кодеками. Так, по состоянию на 29 октября 2011 г., возможность воспроизведения контента представлена на рисунках 2.1 – 2.3.

Рисунок 2.1 – Поддержка кодека Ogg Theora

Рисунок 2.2 – Поддержка кодека WebM/VP8

Рисунок 2.3 – Поддержка кодека H.264/MPEG-4

Для работы с медиаконтентом в HTML5 используются теги <audio>…</audio> для работы с аудио контентом и <video>…</video> для работы с видео контентом. Данный тег указывает браузеру необходимость создания контрола для работы с соответствующим контентом. Примеры контролов, генерируемых браузером Google Chrome, представлены на рисунках 2.4 – 2.5.

Рисунок 2.4 – Контрол для работы с аудио контентом

Рисунок 2.5 – Контрол для работы с видео материалом (отображается клип на композицию БИ-2 – «Оптимист»)

Данные теги принимают ряд необязательных параметров:

- src – принимает строку, которая определяет URL загружаемого контента.

- autoplay – принимает логическое значение, определяющего начнётся ли воспроизведение контента сразу после загрузки элемента.

- loop – принимает логическое значение, указывающее будет ли воспроизведение начато с начала после завершения.

- muted – принимает логическое значение, указывающее будет ли воспроизводится в беззвучном режиме.

- controls – принимает логическое значение, указывающее, что разработчик просит браузер предоставить встроенные компоненты управления, в случае не указания данного параметра, контролы, указанные на рисунках 2.4 – 2.5, созданы не будут, и их создание полностью лежит на программисте.

- poster – только для тега <video>, принимает строку, определяющую URL изображения-заглушки.

Как уже было замечено ранее, разные браузеры поддерживают разные наборы кодеков. Для создания, контента, который будет воспроизводиться одинаково во всех браузерах, используется тег <source>…</source>, который вкладывается внутрь основного тега. Теги <source> - рассматриваются браузером последовательно сверху-вниз до момента, пока не встретится первый источник, который может быть воспроизведён. Если не встретится контент, который закодирован кодеком, который понимается браузером – воспроизведение начато не будет.

Тег <source> получает следующие параметры:

- src – обязательный атрибут, принимающий строку, содержащую URL медиаконтента

- type – параметр, принимающий строку, которая содержит MIME тип медиа контента. Параметр иногда используется с подпараметром codecs, принимающим строку, которая содержит точную строку-наименование кодека медиа-контента по RFC4281.

Образец использования тега <source>:

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Для работы с контентом используются следующие js – функции:

- load() – загружает медиафайл и подготавливает его к воспроизведению. Вызов данной функции в явном виде, почти никогда не требуется. Исключение составляет только загрузка контента, который создается динамически;

- play() – загружает и воспроизводит медиафайл. Также служит для восстановления воспроизведения после приостановки;

- pause() – приостанавливает воспроизведение медиафайла;

- canPlayType(type) – возвращает булево значение, если браузер может воспроизводить данный тип. В качестве типа передаётся MIME-type воспроизводимого контента.

Для анализа текущего состояния воспроизводимого контента используются следующие readonly-параметры.

- duration – возвращает число с плавающей точкой, показывающее продолжительность клипа в секундах;

- paused – возвращает true – если воспроизведение приостановлено;

- ended – возвращает true если клип завершился;

- startTime – возвращает число с плавающей точкой, показывающее время с которого начинается воспроизведение в секундах. Чаще всего равняется 0.0. Исключение составляет потоковый контент. В данном случае возвращается время, с которого медиаконтент содержится в буфере;

- error – возвращает код последней ошибки;

- currentSrc – возвращает строку – содержимое атрибута src.

Для управления состоянием воспроизведения контента, используются следующие параметры:

- autoplay – устанавливает/возвращает установку атрибута autoplay;

- loop – устанавливает/возвращает установку атрибута loop;

- currentTime – устанавливает/возвращает количество времени прошедшее с момента запуска файла в секундах.;

- controls – устанавливает/возвращает установку атрибута controls;

- volume – устанавливает/возвращает уровень громкости. Уровень громкости указывается числом плавающей точкой от 0.0 до 1.0;

- muted – устанавливает/возвращает установку беззвучного режима.

Дата добавления: 2015-11-14