Демонстрация 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 и также будет выполнено обновление всех представленных в таблице ниже свойств медиа элемента примера видео.

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

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

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

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();