Демонстрация JS управления HTML5 video и audio

Статья является сводным, обобщенным примером для всех постов по теме JS манипуляции видео и аудио, и представляет комплексную демонстрацию управления HTML5 элементами video и audio при помощи JS. В этой статье продемонстрирована работа всех JS методов, доступных для медиа элемента аудио и видео на веб странице, показаны примеры изменения всех основных свойств медиа элемента. Для примера видео этой страницы приведены обработчики всех событий имеющихся у медиа элементов аудио и видео и выполнены перехваты этих событий с подсчетом их количества и обновлением свойств медиа элемента при наступлении каждого события. Все это позволяет наглядно представить обработку медиа элементов audio и video в браузере, увидеть связи между работой методов, событиями и свойствами медиа элемента HTML5 при использовании JS управления видео и аудио на web странице. Также, изучение и анализ исходного кода страницы и демонстрационных примеров может быть полезен при разработке ваших собственных скрипов для аудио и видео плеера или при использовании сторонних библиотек js плееров. В любом случае понимание механизма реализации и работы в браузере медиа элемента аудио и видео будет хорошим базисом в изучении HTML5 и Java Script.

 

Пример video для демонстрации:

Для работы с примером видео на этой странице при демонстрации JS использовано присвоение объекта видео в переменную JS с именем "myVideo".

Пример видео содержит три медиа файла источника (.mp4, .webm, .ogv), подключенные через теги source, и два текстовых трека (для RU и для EN), подключенные через теги track. Исходный код примера видео см. в конце страницы.

По правой границе элемента видео его обтекают кнопки для демонстрационного вызова тех или иных действий с видео элементом. Отображаемое название кнопок кратко описывает выполняемые ими JS манипуляции с примером видео на странице. Также, помимо этих кнопок, используйте стандартные элементы управления доступные в панели управления медиа плеера, что бы инициировать те или иные события и изменения свойств.

Под блоком видео с кнопками располагается блок со счетчиками отслеживаемых событий для медиа элемента примера видео этой страницы. При наступлении отслеживаемого события для примера видео значение одноименного счетчика этого события будет увеличено на 1 и также будет выполнено обновление всех представленных в таблице ниже свойств медиа элемента примера видео.

 

Счетчики отслеживаемых событий медиа элемента:

loadstart: 0
progress: 0
suspend: 0
abort: 0
error: 0
emptied: 0
stalled: 0
loadedmetadata: 0
loadeddata: 0
canplay: 0
canplaythrough: 0
playing: 0
waiting: 0
seeking: 0
seeked: 0
ended: 0
durationchange: 0
timeupdate: 0
play: 0
pause: 0
ratechange: 0
resize: 0
volumechange: 0
tracklist change: 0
tracklist addtrack: 0
tracklist removetrack: 0

Таблица свойств медиа элемента примера видео:

Представленные ниже в таблице свойства медиа элемента примера видео этой страницы будут обновляться каждый раз при наступлении любого из отслеживаемых событий. Наступление тех или иных событий при манипуляции с медиа элементом может происходить достаточно быстро и, соответственно, изменение свойств в таблице тоже будет происходить быстро, поэтому нужно быть внимательным, что бы заметить изменения характерные именно для ожидаемого события. Можно также воспользоваться консолью браузера для задания отслеживания только нужного события. Также, нужно помнить, что некоторые события уже наступают при загрузке страницы в браузере, поэтому счетчики по ним будут сразу больше 0. Если значение свойства в таблице было установлено как undefined, то это означает, что браузером данное свойство медиа элемента аудио и видео не поддерживается и не реализовано.

Свойства медиа элемента/Media Properties Текущее значение свойства
Статусы ошибки
readonly свойство MediaError error  
Статусы сетевого состояния
свойство DOMString src  
readonly свойство DOMString currentSrc  
свойство DOMString crossOrigin  
readonly свойство unsigned short networkState  
свойство DOMString preload  
readonly свойство TimeRanges buffered  
Статусы готовности для воспроизведения
readonly свойство unsigned short readyState  
readonly свойство boolean seeking  
Статусы воспроизведения
свойство double currentTime  
readonly свойство unrestricted double duration  
readonly свойство boolean paused  
свойство double defaultPlaybackRate  
свойство double playbackRate  
readonly свойство TimeRanges played  
readonly свойство TimeRanges seekable  
readonly свойство boolean ended  
свойство boolean autoplay  
свойство boolean loop  
Media Controller
свойство DOMString mediaGroup  
свойство MediaController controller  
Свойства контроля и управления
свойство boolean controls  
свойство double volume  
свойство boolean muted  
свойство boolean defaultMuted  
Треки
readonly свойство AudioTrackList audioTracks  
readonly свойство VideoTrackList videoTracks  
readonly свойство TextTrackList textTracks  
VideoElement свойства
свойство unsigned long width  
свойство unsigned long height  
readonly свойство unsigned long videoWidth  
readonly свойство unsigned long videoHeight  
свойство DOMString poster  

 

JS код демонстрации примера:

/*
<VIDEO class="c3" id="video-example" controls="" poster="example/video-poster.png">
<SOURCE src="example/html5-video-example.mp4" type="video/mp4"> 
<SOURCE src="example/html5-video-example.webm" type="video/webm"> 
<SOURCE src="example/html5-video-example.ogv" type="video/ogg"> 
<TRACK kind="subtitles" src="example/subtitles-ru.vtt" srclang="ru" label="RU" default=""> 
<TRACK kind="subtitles" src="example/subtitles.vtt" srclang="en" label="EN"> 
<P>HTML5 video не поддерживается вашим браузером.</P></VIDEO> */

// получение медиа элемента video в переменную myVideo
var myVideo = document.getElementById("video-example-1");

// массив с отслеживаемыми событиями для медиа элемента
var media_events = new Array();
media_events["loadstart"] = 0;
media_events["progress"] = 0;
media_events["suspend"] = 0;
media_events["abort"] = 0;
media_events["error"] = 0;
media_events["emptied"] = 0;
media_events["stalled"] = 0;
media_events["loadedmetadata"] = 0;
media_events["loadeddata"] = 0;
media_events["canplay"] = 0;
media_events["canplaythrough"] = 0;
media_events["playing"] = 0;
media_events["waiting"] = 0;
media_events["seeking"] = 0;
media_events["seeked"] = 0;
media_events["ended"] = 0;
media_events["durationchange"] = 0;
media_events["timeupdate"] = 0;
media_events["play"] = 0;
media_events["pause"] = 0;
media_events["ratechange"] = 0;
media_events["resize"] = 0;
media_events["volumechange"] = 0;

// массив с отслеживаемыми событиями для tracklist объекта
var media_tracklist_events = new Array();
media_tracklist_events["change"] = 0;
media_tracklist_events["addtrack"] = 0;
media_tracklist_events["removetrack"] = 0;

// массив с обновляемыми свойствами для медиа объекта  video
var media_properties = [ "error", "src", "currentSrc",
"crossOrigin", "networkState", "preload", "buffered",
"readyState", "seeking", "currentTime", "duration",
"paused", "defaultPlaybackRate", "playbackRate", "played",
"seekable", "ended", "autoplay", "loop", "mediaGroup",
"controller", "controls", "volume", "muted", "defaultMuted",
"audioTracks", "videoTracks", "textTracks", "width",
"height", "videoWidth", "videoHeight", "poster" ];

// функция обновление значений свойств медиа элемента в таблице
function update_properties() {
    var val = null;
    for (key in media_properties) {
        var e = document.getElementById("td-property-" + media_properties[key]);
        if (e) {
            val = eval("myVideo." + media_properties[key]);
            if( val === undefined ) {
                e.textContent = "undefined"
            } else if ( val === null ) {
                e.textContent = "null"
            } else if(val === "") {
                e.textContent = "пустая строка"
            } else {
                e.textContent = eval("myVideo." + media_properties[key]);
            }
        }
    }
}

// функция задания обработчиков для отслеживаемых событий
function init_events() {
    for (key in media_events) {
        myVideo.addEventListener(key, update_data, false);
    }
    if (myVideo.audioTracks !== undefined) {
        try {
                 for (key in media_tracklist_events) {
                    myVideo.audioTracks.addEventListener(key, update_track_data, false);
                }
        } catch (e) {}
    }
    if (myVideo.videoTracks !== undefined) {
        try {
                for (key in media_tracklist_events) {
                    myVideo.videoTracks.addEventListener(key, update_track_data, false);
                }
        } catch (e) {}
    }
    if (myVideo.textTracks !== undefined) {
        try {
                for (key in media_tracklist_events) {
                    myVideo.textTracks.addEventListener(key, update_track_data, false);
                }
        } catch (e) {}
    }
}

// функция обработчик событий медиа элемента
function update_data(event) {
    media_events[event.type]++;
    var e = document.getElementById("td-events-" + event.type);
    if (e) {
        e.textContent = media_events[event.type];
    }
    update_properties();
}

// функция обработчик событий для объектов TrackList
// media.audioTracks, media.videoTracks, media.textTracks
function update_track_data(event) {
    media_tracklist_events[event.type]++;
    var e = document.getElementById("td-tracklist-events-" + event.type);
    if (e) {
        e.textContent = media_tracklist_events[event.type];
    }
    update_properties();
}

// инициализация обработчиков событий
init_events();

Справочник JavaScript
×
Справочник JavaScript