События Audio и Video

Здесь представлены DOM события для медиа элементов HTML5 audio и video, возникающие при его обработке в браузере. Для событий приводятся их описания, моменты возникновения, состояния свойств медиа элемента при событиях.

Демонстрацию описанных здесь событий можно посмотреть и попробовать на странице: "Демонстрация JS управления HTML5 video и audio.

Ниже перечисленные события вызываются в браузере для медиа элемента audio и video и медиа контроллера, если он поддерживается. Такие события, как emptied, loadedmetadata, loadeddata,  canplay, canplaythrough, playing, ended, waiting, durationchange, timeupdate, play, pause, ratechange, volumechange возникают как для медиа элемента, так и для медиа контроллера (если он поддерживается браузером), который управляет подчиненными ему медиа элементами, которые он представляет.

loadstart

Событие loadstart возникает, когда браузер начал выполнять поиск медиа файла в процессе исполнения алгоритма выбора ресурса для медиа элемента. Свойство networkState устанавливается как NETWORK_LOADING.

progress

Событие progress возникает, когда браузер начал выполняет загрузку медиа файла. Свойство networkState равно NETWORK_LOADING. Это событие может возникать несколько раз в ходе воспроизведения, если медиа файл подгружается ступенчато, по мере запроса следующей его части, необходимой для воспроизведения.

suspend

Событие suspend возникает, когда браузер перешел в ожидание команды на старт загрузки медиа файла, т.е. браузер установил источник медиа файла, но не загружает его, так как ожидает команды (события) от пользователя на старт загрузки. Это, так сказать, "состояние ожидания", когда для элемента аудио или видео на web странице не стоит автозагрузка и авто воспроизведение, поэтому, браузер не начинает сам выполнять загрузку файла, а ожидает на это команды от пользователя, например, на старт воспроизведения файла. И только после команды от пользователя браузер приступит к загрузке файла. Свойство networkState равно NETWORK_IDLE.

abort

Событие abort возникает, когда браузер преждевременно перестал продолжать загружать медиа файл, не достигнув окончания загрузки, по причине прерывания этого действия пользователем, а не из-за ошибки. Свойство error.code будет соответствовать MEDIA_ERR_ABORTED, свойство networkState будет как NETWORK_EMPTY или как NETWORK_IDLE, в зависимости от того когда загрузка была прервана пользователем.

error

Событие error возникает, когда произошла ошибка при получении и загрузки медиа файла. Свойство error медиа элемента является объектом и его свойство error.code будет при этом событии как MEDIA_ERR_NETWORK (значение 2) или выше, networkState будет как NETWORK_EMPTY или NETWORK_IDLE, в зависимости от того, когда загрузка была прервана и возникла ошибка.

emptied

Событие emptied возникает, когда для медиа элемента, который предварительно имел значение свойства networkState не равное NETWORK_EMPTY произошла установка данного свойства в значение NETWORK_EMPTY. Это может произойти при возникновении ошибки в процессе загрузки медиа файла (например, обрыв связи и т.п.), или когда метод load() был вызван уже в процессе работы алгоритма выбора ресурса для медиа элемента. При этом событии свойство networkState будет установлено как NETWORK_EMPTY и другие свойства медиа элемента будут сброшены в первоначальный значения, которые они имели при инициализации медиа объекта. Свойство readyState будет равно HAVE_NOTHING значению.
Для медиа контроллера (MediaController) событие emptied возникает, когда управляемые им медиа элементы заново получают значение свойства MediaController.readyState равное HAVE_NOTHING, или когда для данного медиа контролера отсутствуют какие либо управляемые им медиа элементы.

stalled

Событие stalled возникает, когда браузер пытается получить и загрузить медиа файл, но ожидаемая порция данных не поступает, например, при медленном сетевом соединении и возникает, так сказать, состояние "подвисания". Это еще не ошибка, а лишь задержка в получении данных, и поступление данных может продолжиться или может прерваться полностью, что вызовет уже ошибку. Свойство networkState при этом событии равно значению NETWORK_LOADING.

loadedmetadata

Событие loadedmetadata возникает для медиа элемента и для медиа контроллера, когда браузер успешно загрузил метаданные медиа файла - длительность, размер, текстовые треки. Свойство readyState элемента и свойство MediaController.readyState при этом событии будет установлено заново как HAVE_METADATA или выше.

loadeddata

Событие loadeddata возникает для медиа элемента и для медиа контроллера, когда браузер в первый раз успешно загрузил необходимые для воспроизведения с текущей позиции курсора медиа данные (или необходимую порцию данных) и может начать их проигрывать. Свойство readyState и свойство MediaController.readyState при этом событии будет заново установлено в значение HAVE_CURRENT_DATA или большее.

canplay

Событие canplay возникает для медиа элемента и для медиа контроллера, когда браузер готов и может продолжить или начать воспроизведение медиа файла, однако считает, что если воспроизведение было бы запущено прямо сейчас, то, для текущей скорости воспроизведения, медиа файл не сможет быть проигран до его полного окончания без остановки воспроизведения для буферизации медиа данных. Свойство readyState и свойство MediaController.readyState при этом событии будет заново установлено в значение HAVE_FUTURE_DATA или большее.

canplaythrough

Событие canplaythrough возникает для медиа элемента и для медиа контроллера, когда браузер считает, что если бы воспроизведение было бы запущено прямо сейчас, то медиа файл мог бы быть проигран до его полного окончания на текущей скорости воспроизведения без остановок и прерываний для буферизации медиа данных. Свойство readyState и свойство MediaController.readyState при этом событии будет заново установлено в значение HAVE_ENOUGH_DATA или большее.

playing

Событие playing возникает, когда воспроизведение медиа файла начинается после того, как оно было остановлено или задержано из-за отсутствия поступления необходимых для этого медиа данных. При этом событии свойство readyState  заново установлено в значение HAVE_FUTURE_DATA или большее и свойство paused равно или заново установлено в значение false. Однако, несмотря на то, что событие playing возникло, медиа файл, все же, может и не начать воспроизводиться, например, если медиа элемент заблокирован его медиа контроллером, в котором установлена пауза для воспроизведения и т.п. Таким образом событие playing означает только готовность браузера начать воспроизведение медиа файла, но не само воспроизведение, которое к тому же не гарантированно.
Для медиа контроллера событие playing означает, что медиа контроллер разблокирован для начала воспроизведения медиа файла.

waiting

Событие waiting возникает для медийного элемента и для медиа контроллера, когда воспроизведение медиа файла остановилось из-за отсутствия для этого следующего кадра и браузер поэтому прервал воспроизведение и ожидает (рассчитывает), что необходимый следующий кадр станет доступным в порядке очереди в ближайший момент времени. Иными словами, событие waiting означает ожидание браузером следующей порции медиа данных для воспроизведения. При низко пропускном сетевом соединении это достаточно часто возникающее событие. При этом событии свойство readyState равно значению HAVE_CURRENT_DATA или меньшему и свойство paused имеет значение false. Также свойство seeking равно true или текущая позиция воспроизведения не содержится ни в одном из диапазонов из объекта buffered.

seeking

Событие seeking возникает, когда свойство seeking было изменено на значение true и началось выполнение пользователем смены положения курсора воспроизведения для поиска и установки новой позиции воспроизведения, т.е. пользователь, в текущий момент, начал выбирать новое место воспроизведения на шкале проигрывания медиа файла, но еще не закончил этот процесс, т.е. курсор находиться в движении.

seeked

Событие seeked возникает, когда свойство seeking было изменено на значение false после того, как была выполнена и закончена смена пользователем текущей позиции курсора  воспроизведения. Это событие означает, что перемещение курсора воспроизведения (прокрутка, поиск) по медиа файлу закончилось.

ended

Событие ended возникает для медийного элемента и для медиа контроллера, когда воспроизведение было остановлено по причине достижение конца медиа файла. При этом событии свойство currentTime равно времени окончания медиа файла (это не всегда может быть именно длительность медиа файла) в плеере и свойство ended установлено в значение true.

durationchange

Событие durationchange возникает для медийного элемента и для медиа контроллера, когда свойство duration (общая длительность медиа файла в секундах) было обновлено для медиа элемента. Обычно это происходит при загрузке медиа элемента на web странице, но может возникать и когда элемент уже загружен, например, для потокового видео.

timeupdate

Событие timeupdate возникает для медийного элемента и для медиа контроллера в момент, когда произошло изменение текущей позиции воспроизведения на новое значение. Текущая позиция воспроизведения есть время на временной линии медиа плеера и определяется как свойство currentTime для медиа элемента. Событие timeupdate возникает как в ходе нормального воспроизведения файла, так и в ходе любого другого варианта изменения текущей позиции воспроизведения, например, в ходе перемещения курсора воспроизведения пользователем на временной шкале плеера. Этим событием удобно пользоваться если нужно постоянно получать актуальную текущую позицию курсора воспроизведения.

play

Событие play возникает для медийного элемента и для медиа контроллера в момент, когда начинается воспроизведение медиа файла в плеере. Событие play возникает как результат работы метода play() или когда старт воспроизведения медиа файла был вызван автоматически, потому что значение свойства autoplay и одноименного HTML атрибута autoplay задано как true. При этом событии свойство paused заново устанавливается в значение false.

pause

Событие pause возникает для медийного элемента и для медиа контроллера в момент, когда воспроизведение медиа файла было остановлено в плеере, что возникает как результат работы метода pause(). При этом событии свойство paused заново устанавливается в значение true.

ratechange

Событие ratechange возникает для медийного элемента и для медиа контроллера в момент, когда значения свойств defaultPlaybackRate или playbackRate медиа элемента были изменены.

resize

Событие resize возникает в момент, когда значения свойств videoHeight и(или) videoWidth видео элемента были обновлены или инициализированы. Событие возникает при загрузке или перезагрузке медиа элемента на странице и свойственно только для видео элемента, т.к. именно он имеет свойства высоты и ширины у видео файла. При этом событии, значение свойства readyState не должно быть равно HAVE_NOTHING, т.е. элемент должен иметь действительные размеры, иначе событие не наступит (нет значений для установки), а значения свойств videoHeight и videoWidth будут заданы равными 0 нулю.

volumechange

Событие volumechange возникает для медийного элемента и для медиа контроллера, когда было выполнено изменение значения свойства volume или muted для медийного элемента, т.е. произошло изменение уровня громкости или включение/выключение звука в медиа плеере.

TrackList

Ниже описанные TrackList события возникают для таких js объектов как: AudioTrackList, VideoTrackList и TextTrackList, которые являются значениями одноименных свойств audioTracks, videoTracks и textTracks.

change

Событие change возникает в момент, когда один или несколько соответствующих событию треков были добавлены или удалены из соответствующего TrackList объекта.

addtrack

Событие addtrack возникает в момент, когда один или несколько соответствующих событию треков были добавлены в соответствующий TrackList объект.

removetrack

Событие removetrack возникает в момент, когда один или несколько соответствующих событию треков были удалены из соответствующего TrackList объекта.

Способы и общие примеры добавления обработчиков событий медиа элемента:

Добавить обработчик (функцию исполняемую по событию) для события медиа элемента можно несколькими способами:

//путем использования HTML атрибута с именем onимя_события для тега audio и video

var myVideo = document.getElementById("video-example-1");
//через атрибут тега
<video onloadstart="alert(this)" onplay="myfunction(this)"> ... </video>
//или
myVideo.setAttribute('onplay', "myfunction(this)");
//или
myVideo.onplay = function () {
                    ...
                 };

//Путем использования специальных методов addEventListener и attachEvent
//добавление обработчика для одного события loadstart
myVideo.addEventListener("loadstart", function() {
    ...
}, false);

//добавление обработчика для нескольких событий
var media_events = ["loadstart", "progress", "play"];

function init_events() {
    for (key in media_events) {
        myVideo.addEventListener(media_events[key], myfunction, false);
    }
}

Также смотри примеры на странице: "Демонстрация JS управления HTML5 video и audio.