Материалы для WEB разработки на LAMP
Демонстрация 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 в переменную 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();