1.3 Порядок выполнения работы
При выполнении лабораторной работы необходимо реализовать игровое приложение, тематику которого задает преподаватель. Примеры заданий для лабораторной работы приведены в разделе 1.4. Ниже рассмотрен порядок выполнения лабораторной работы на тему «Игра змейка».
1.3.1Работа с медиа-элементами
При работе с медиаконтентом следует помнить, что браузер может воспроизводить только медиа, закодированное строго ограниченным набором кодеков, среди которых:
Аудиокодеки:
AAC;
MPEG-3;
Ogg Vorbis.
Видеокодеки:
H.264;
VP8;
Ogg Theora.
Так же, не следует забывать, что определённые браузеры могут воспроизводить контент, закодированный строго определёнными кодеками.
Для работы с медиаконтентом в HTML5 используются теги: <audio>… </audio> для работы с аудио контентом и <video>…</video> для работы с видео контентом. Данный тег указывает браузеру необходимость создания контрола для работы с соответствующим контентом. Пример контролов, генерируемых браузером Google Chrome, представлены на рисунках 1.1 – 1.2.
Рисунок 1.1 – Контрол для работы с аудио контентом
Рисунок 1.2 – Контрол для работы с видео материалом (отображается клип на композицию БИ-2 – «Оптимист»)
Данные теги принимают ряд необязательных параметров:
src – принимает строку, которая определяет URL загружаемого контента.
autoplay – принимает логическое значение, определяющего начнётся ли воспроизведение контента сразу после загрузки элемента.
loop – принимает логическое значение, указывающее будет ли воспроизведение начато с начала после завершения.
muted – принимает логическое значение, указывающее будет ли воспроизводится в беззвучном режиме.
controls – принимает логическое значение, указывающее, что разработчик просит браузер предоставить встроенные компоненты управления, в случае не указания данного параметра, контролы, указанные на рисунках 1.1 – 1.2, созданы не будут, и их создание полностью лежит на программисте.
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 – устанавливает/возвращает установку беззвучного режима.