- Операторы
- Управляющие инструкции
- JS Объекты
- браузер BOM
- HTML DOM
- События
- HTML Объекты
- Anchor
- Area
- Audio и Video
- addTextTrack()
- audioTracks
- autoplay
- buffered
- canPlayType()
- controller
- controls
- crossOrigin
- currentSrc
- currentTime
- defaultMuted
- defaultPlaybackRate
- duration
- ended
- error
- load()
- loop
- mediaGroup
- muted
- networkState
- pause()
- paused
- playbackRate
- play()
- played
- poster
- preload
- readyState
- seekable
- seeking
- src
- textTracks
- videoTracks
- videoWidth и videoHeight
- volume
- width и height
- События
- Пример
- Base
- Canvas
- Form
- IFrame
- Image
- Input
- Link
- Meta
- Option
- Progress
- Select
- Style
- Table
- Textarea
- TableHead и TableDate
- TableRow
- Промисы, async/await
- Сетевые запросы
- Бинарные данные и файлы
- Модули
- Классы
- Разное
Демонстрация 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();