События видеоплеера

События видеоплеера.

В HTML5 появились новые события, относящиеся к конкретным API. Для обработки видео и аудио были добавлены события, информирующие о состоянии мультимедиа — например, о том, какая доля видео уже загружена, завершилось ли воспроизведение файла, воспроизводится видео или приостановлено и т.п. Мы не будем использовать в примере все существующие события, однако для построения более сложных приложений они могут понадобиться. Далее перечислены наиболее часто используемые:

— progress. Это событие срабатывает периодически и обновляет информацию о состоянии загрузки мультимедиа. Для доступа к этой инфор-

Мации используется атрибут buffered, с которым мы познакомимся чуть позже;

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

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

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

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

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

Посредством нашего проигрывателя будем прослушивать только обычные события click и load.

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

Для того чтобы проверить, каких успехов достигла спецификация HTML5 в этом отношении, посетите наш веб-сайт и пройдитесь по ссылкам для этой главы.

Листинг 5.6. Первая функция

Function initiate() { maxim=600;

Mmedia=document. getElementById(‘media’);

Play=document. getElementById(‘play’);

Bar=document. getElementById(‘bar’);

Progress=document. getElementById(‘progress’);

Play. addEventListener(‘click’, push, false); bar. addEventListener(‘click’, move, false);

В листинге 5.6 представлена первая функция для нашего видеопроигрывателя. Функция называется initiate, так как она инициирует приложение, то есть запускает его выполнение после завершения загрузки окна. Так как эта функция исполняется первой, необходимо установить глобальные переменные для настройки проигрывателя. Используя селектор getElementByld, мы определили ссылки на все элементы проигрывателя, для того чтобы позднее обращаться к ним в коде. Мы также установили переменную maxim, чтобы всегда знать максимальный размер индикатора прогресса (600 пикселов).

Наш проигрыватель должен принимать во внимание два действия: пользователь щелкает на кнопке Play (Воспроизведение) и пользователь щелкает на индикаторе прогресса, для того чтобы перейти к кадру ближе к началу или к концу медиафайла. Для этой цели мы добавили два прослушивателя событий. Сначала добавили к элементу play прослуши-ватель события click. Этот прослушиватель будет запускать функцию push() каждый раз, когда пользователь щелкнет на элементе (кнопке Play). Второй прослушиватель относится к элементу bar. Он указывает, что каждый раз, когда пользователь щелкает на индикаторе прогресса, будет выполняться функция move().

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

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