HTML API DOM аудио видео
❮ Назад Дальше ❯
HTML аудио и видео DOM ссылка
В модели HTML5 DOM есть методы, свойства и события для <audio> И <video> Элементы.
Эти методы, свойства и события позволяют манипулировать элементами <audio> и <video> с помощью JavaScript.
HTML Аудио и Видео методы
| Метод | Описание |
|---|---|
| addTextTrack() | Добавление новой текстовой дорожки в аудио/видео |
| canPlayType() | Проверяет, может ли обозреватель воспроизвести указанный тип аудио/видео |
| load() | Повторная загрузка элемента аудио/видео |
| play() | Начинает воспроизведение аудио/видео |
| pause() | Приостанавливает воспроизведение аудио/видео в текущий момент |
Свойства аудио/видео в формате HTML
| Свойство | Описание |
|---|---|
| audioTracks | Возвращает объект аудиотракклист, представляющий доступные звуковые дорожки |
| autoplay | |
| buffered | Возвращает объект тимеранжес, представляющий буферизованные части аудио/видео |
| controller | Возвращает объект медиаконтроллер, представляющий текущий контроллер мультимедиа аудио/видео |
| controls | Устанавливает или возвращает ли аудио/видео должны отображать элементы управления (например, воспроизведение/пауза и т. д.) |
| crossOrigin | Задает или возвращает настройки перекрестия аудио/видео |
| currentSrc | Возвращает URL-адрес текущего аудио/видео |
| currentTime | Устанавливает или возвращает текущую позицию воспроизведения в аудио/видео (в секундах) |
| defaultMuted | Устанавливает или возвращает ли аудио/видео должно быть отключено по умолчанию |
| defaultPlaybackRate | Устанавливает или возвращает скорость воспроизведения аудио/видео по умолчанию |
| duration | Возвращает длину текущего аудио/видео (в секундах) |
| ended | Возвращает значение, закончилось ли воспроизведение аудио/видео |
| error | Возвращает объект медиаеррор, представляющий состояние ошибки аудио/видео |
| loop | Устанавливает или возвращает значение, если аудио/видео должно начинаться снова после завершения |
| mediaGroup | Устанавливает или возвращает группу, к которой принадлежит аудио/видео (используется для связывания нескольких элементов аудио/видео) |
| muted | Задает или возвращает значение, если звук/видео отключен или нет |
| networkState | Возвращает текущее состояние сети аудио/видео |
| paused | Возвращает значение, если аудио/видео приостановлено или нет |
| playbackRate | Устанавливает или возвращает скорость воспроизведения аудио/видео |
| played | Возвращает объект тимеранжес, представляющий воспроизводимые части аудио/видео |
| preload | Устанавливает или возвращает ли аудио/видео должно быть загружено при загрузке страницы |
| readyState | Возвращает текущее состояние готовности аудио/видео |
| seekable | Возвращает объект тимеранжес, представляющий поисковые части аудио/видео |
| seeking | Возвращает ли пользователь в настоящее время ищет в аудио/видео |
| src | Устанавливает или возвращает текущий источник аудио/видео элемента |
| startDate | Возвращает объект даты, представляющий текущее смещение времени |
| textTracks | Возвращает объект тексттракклист, представляющий доступные текстовые дорожки |
| videoTracks | Возвращает объект видеотракклист, представляющий доступные видеодорожки |
| volume | Устанавливает или возвращает громкость аудио/видео |
События HTML аудио/видео
| Событие | Описание |
|---|---|
| abort | Срабатывает при прерывании загрузки аудио/видео |
| canplay | Срабатывает, когда браузер может начать воспроизведение аудио/видео |
| canplaythrough | Срабатывает, когда браузер может воспроизводить аудио/видео без остановки для буферизации |
| durationchange | Срабатывает при изменении длительности аудио/видео |
| emptied | Срабатывает, когда текущий плейлист пуст |
| ended | Срабатывает при завершении текущего плейлиста |
| error | Срабатывает, когда произошла ошибка во время загрузки аудио/видео |
| loadeddata | Срабатывает, когда браузер загрузил текущий кадр аудио/видео |
| loadedmetadata | Срабатывает, когда браузер загружает мета-данные для аудио/видео |
| loadstart | Срабатывает, когда браузер начинает искать аудио/видео |
| pause | Срабатывает, когда аудио/видео было приостановлено |
| play | Срабатывает, когда аудио/видео было запущено или больше не приостановлено |
| playing | Срабатывает при воспроизведении аудио/видео после паузы или остановки для буферизации |
| progress | Срабатывает, когда браузер загружает аудио/видео |
| ratechange | Срабатывает при изменении скорости воспроизведения аудио/видео |
| seeked | Срабатывает, когда пользователь завершает перемещение/пропуск на новую позицию в аудио/видео |
| seeking | Срабатывает, когда пользователь начинает перемещение/пропуск на новую позицию в аудио/видео |
| stalled | Срабатывает, когда обозреватель пытается получить данные мультимедиа, но данные недоступны |
| suspend | Срабатывает, когда обозреватель преднамеренно не получает данные мультимедиа |
| timeupdate | Срабатывает при изменении текущей позиции воспроизведения |
| volumechange | Срабатывает при изменении тома |
| waiting | Срабатывает, когда видео останавливается, потому что он должен буфер следующий кадр |
❮ Назад Дальше ❯
Введение в HTML5 — тест 5
Главная / Интернет-технологии / Введение в HTML5 / Тест 5
Упражнение 1:
Номер 1
Назовите новые элементы медиа, появившиеся в HTML5?
Ответ:
 (1) <embed> 
<object>   (3) <video> 
 (4) <audio> 
Номер 2
Какой атрибут тега video задает URL видеофайла?Ответ:
 (1) src 
 (2) poster 
  (3) controls 
Номер 3
Какой атрибут тега <video> заставляет браузер отображать свои собственные элементы управления для воспроизведения и громкости?Ответ:
 (1) src 
 (2) poster 
 (3) control 
Упражнение 2:
Номер 1
Какой атрибут тега<video>задает ширину видеофайла?
Ответ:
 (1) width 
 (2) height 
 (3) poster 
Номер 2
Какой атрибут тега <video> задает высоту видеофайла?Ответ:
 (1) width 
 (2) height 
 (3) poster 
Номер 3
Какой атрибут тега <video> задает обложку видеофайла?Ответ:
 (1) width 
 (2) height 
 (3) poster 
Упражнение 3:
Номер 1
Какой атрибут тега <video> дает браузеру указание начинать воспроизведение видео автоматически?Ответ:
 (1) autoplay 
 (2) autobuffer 
 (3) loop 
Номер 2
Какой атрибут тега <video> говорит браузеру, чтобы загрузка медиа начиналась немедленно?Ответ:
 (1) autoplay 
 (2) autobuffer 
 (3) loop 
Номер 3
Какой атрибут тега <video> приводит к циклическому повторению воспроизведения видео?Ответ:
 (1) autoplay 
 (2) autobuffer 
 (3) loop 
Упражнение 4:
Номер 1
Укажите корректные стандартные методы для создания на странице индивидуальных элементов управления медиа?
Ответ:
 (1) play() 
 (2) pause() 
 (3) stop() 
Номер 2
Укажите некорректные методы для создания на странице индивидуальных элементов управления медиа?
Ответ:
 (1) play() 
 (2) pause() 
 (3) stop() 
Номер 3
Укажите некорректные методы для создания на странице индивидуальных элементов управления медиа?
Ответ:
 (1) play() 
 (2) stop() 
 (3) reverse() 
Упражнение 5:
Номер 1
Какие из приведенных ниже видеокодеков имеют поддержку в браузерах без установки дополнительных плагинов:
Ответ:
 (1) ogg/theora 
 (2) H.
263 
 (3) H.264 
 (4) Sorenson 
 (5) WebM/VP8 
Номер 2
Какие из приведенных ниже видеокодеков не имеют поддержку в браузерах без установки дополнительных плагинов:
Ответ:
 (1) ogg/theora 
 (2) H.263 
 (3) H.264 
 (4) Sorenson 
 (5) WebM/VP8 
Номер 3
Какие из приведенных ниже видеокодеков имеют поддержку в браузерах без установки дополнительных плагинов:
Ответ:
 (1) ogg/theora 
 (2) H.264 
 (3) DivX 
 (4) On2 TrueMotion VP6 
 (5) WebM/VP8 
Упражнение 6:
Номер 1
Какой атрибут API видео HTML5 можно использовать для считывания или задания громкости аудио дорожки видео?
Ответ:
 (1) volume 
 (2) muted 
 (3) duration 
Номер 2
Какой атрибут API видео HTML5 позволяет заглушить звук в видео?
Ответ:
 (1) volume 
 (2) muted 
 (3) duration 
Номер 3
Какой атрибут API видео HTML5 возвращает текущую позицию воспроизведения в секундах?
Ответ:
 (1) initialTime 
 (2) currentTime 
 (3) startOffsetTime 
Упражнение 7:
Номер 1
Какое событие API видео HTML5 сообщает, что воспроизведение достигло конца видеофайла?
Ответ:
 (1) played 
 (2) paused 
 (3) ended 
 (4) loadeddata 
Номер 2
Какое событие API видео HTML5 сообщает, что браузер загрузил достаточно видео данных, чтобы начать воспроизведение в текущей позиции?
Ответ:
 (1) played 
 (2) paused 
 (3) ended 
 (4) loadeddata 
Номер 3
Какие события API видео HTML5 сообщают, что воспроизведение было начато или остановлено на паузу?
Ответ:
 (1) played 
 (2) paused 
 (3) ended 
 (4) loadeddata 
Упражнение 8:
Номер 1
С помощью какого элемента разметки HTML5 можно создавать на странице гибрид видео и другой графики?
Ответ:
 (1) <img> 
 (2) <canvas> 
 (3) <object> 
Номер 2
Какой элемент HTML5 определяет видео в альтернативном видеоформате?
Ответ:
 (1) <canvas> 
 (2) <source> 
 (3) <video> 
Номер 3
Какой элемент HTML5 вставляет звуковой или видеофайл для тегов<audio>и<video>?
Ответ:
 (1) <canvas> 
 (2) <source> 
 (3) <option> 
Упражнение 9:
Номер 1
Отметьте корректные способы задания дополнительного видеофайла в альтернативном формате:
Ответ:
 (1) <video width=320 height=240 controls poster=turkish.
jpg>
<source src=turkish.ogv type=video/ogg>
<source src=turkish.mp4 type=video/mp4>
Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video> 
 (2) <video width=320 height=240 controls poster=turkish.jpg src=turkish.ogv > <source src=turkish.mp4 type=video/mp4> Download the <a href=video.ogg>Turkish dancing masterclass video</a> </video> 
 (3) <video controls=controls poster=turkish.jpg> <source src=turkish.ogv type=video/ogg> <source src=turkish.mp4 type=video/mp4> Download the <a href=video.ogg>Turkish dancing masterclass video</a> </video> 
Номер 2
Отметьте некорректные способы задания дополнительного видеофайла в альтернативном формате:
Ответ:
 (1) <video width=320 height=240 controls poster=turkish.
jpg>
<source src=turkish.ogv type=video/ogg>
<source src=turkish.mp4 type=video/mp4>
Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video> 
 (2) <video width=320 height=240 controls poster=turkish.jpg src=turkish.ogv > <source src=turkish.mp4 type=video/mp4> Download the <a href=video.ogg>Turkish dancing masterclass video</a> </video> 
 (3) <video controls=controls poster=turkish.jpg> <source src=turkish.ogv type=video/ogg> <source src=turkish.mp4 type=video/mp4> Download the <a href=video.ogg>Turkish dancing masterclass video</a> </video> 
Номер 3
Отметьте корректные способы задания дополнительного видеофайла в альтернативном формате:
Ответ:
 (1) <video width=320 height=240 controls poster=turkish.
jpg>
<source src=turkish.ogv type=video/ogg>
<source src=turkish.mp4 type=video/mp4>
Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video> 
 (2) <video width=320 height=240 controls poster=turkish.jpg src=turkish.ogv> <source src=turkish.ogv type=video/ogg> <source src=turkish.mp4 type=video/mp4> Download the <a href=video.ogg>Turkish dancing masterclass video</a> </video> 
 (3) <video controls=»controls» poster=»turkish.jpg»> <source src=»turkish.ogv» type=»video/ogg»> <source src=»turkish.mp4″ type=»video/mp4″> Download the <a href=»video.ogg»>Turkish dancing masterclass video</a> </video> 
Упражнение 10:
Номер 1
Какие элементы разметки предназначены для вставки титров в видео HTML5?
Ответ:
 (1) <track> 
 (2) <sub> 
 (3) <subtitle> 
Номер 2
Какие элементы разметки не предназначены для вставки титров в видео HTML5?
Ответ:
 (1) <track> 
 (2) <sub> 
 (3) <subtitle> 
Номер 3
Какой формат титров поддерживается элементом <track>?Ответ:
 (1) SSA 
 (2) ASS 
 (3) WebSRT 
Упражнение 11:
Номер 1
Какой из новых атрибутов тега <input> делает его пользовательским элементом управления медиа HTML5?Ответ:
 (1) required 
 (2) placeholder 
 (3) aria-controls 
Номер 2
Какой элемент разметки устанавливает связь между текстовой меткой и элементом формы и используется при создании пользовательских элементов управления?
Ответ:
 (1) <title> 
 (2) <label> 
 (3) <name> 
Номер 3
Какой из стандартных атрибутов HTML5 позволяет назначить тегу клавишу управления?
Ответ:
 (1) accesskey 
 (2) tabindex 
 (3) contextmenu 
Упражнение 12:
Номер 1
Какой из атрибутов элементов управления ARIA позволяет задавать текущее значение ползунка?
Ответ:
 (1) aria-valuenow 
 (2) aria-value-min 
 (3) aria-value-max 
Номер 2
Какой из атрибутов элементов управления ARIA позволяет задавать минимальное значение, которое может иметь ползунок?
Ответ:
 (1) aria-valuenow 
 (2) aria-value-min 
 (3) aria-value-max 
Номер 3
Какой из атрибутов элементов управления ARIA позволяет задавать максимальное значение, которое может иметь ползунок?
Ответ:
 (1) aria-valuenow 
 (2) aria-value-min 
 (3) aria-value-max 
Главная / Интернет-технологии / Введение в HTML5 / Тест 5
HTML Audio/Video DOM Reference
❮ Предыдущий Далее ❯
HTML Audio and Video DOM Reference
HTML5 DOM содержит методы, свойства и события для и элементы.
Методы аудио/видео HTML
| Метод | Описание |
|---|---|
| addTextTrack() | Добавляет новую текстовую дорожку к аудио/видео |
| canPlayType() | Проверяет, может ли браузер воспроизводить указанный тип аудио/видео |
| загрузка() | Повторно загружает элемент аудио/видео |
| играть() | Начинает воспроизведение аудио/видео |
| пауза() | Приостанавливает воспроизводимое в данный момент аудио/видео |
HTML аудио/видео свойства
| свойство | Описание |
|---|---|
| аудиодорожки | Возвращает объект AudioTrackList, представляющий доступные звуковые дорожки |
| автовоспроизведение | Устанавливает или возвращает значение, должно ли аудио/видео воспроизводиться, как только оно загружен |
| с буфером | Возвращает объект TimeRanges, представляющий буферизованные части аудио/видео |
| контроллер | Возвращает объект MediaController, представляющий текущий медиа-контроллер. аудио/видео |
| органы управления | Устанавливает или возвращает значение, должно ли аудио/видео отображать элементы управления (например, воспроизведение/пауза). и др.) |
| crossOrigin | Устанавливает или возвращает настройки CORS для аудио/видео |
| текущий источник | Возвращает URL текущего аудио/видео |
| текущее время | Устанавливает или возвращает текущую позицию воспроизведения аудио/видео (в секундах) |
| по умолчанию Без звука | Устанавливает или возвращает значение, должно ли аудио/видео быть отключено по умолчанию. |
| defaultPlaybackRate | Устанавливает или возвращает скорость воспроизведения аудио/видео по умолчанию |
| продолжительность | Возвращает продолжительность текущего аудио/видео (в секундах) |
| завершено | Возвращает, закончилось ли воспроизведение аудио/видео |
| ошибка | Возвращает объект MediaError, представляющий состояние ошибки аудио/видео |
| петля | Устанавливает или возвращает значение, должно ли аудио/видео начинаться заново после завершения |
| медиагруппа | Устанавливает или возвращает группу, к которой принадлежит аудио/видео (используется для связи несколько аудио/видео элементов) |
| приглушенный | Устанавливает или возвращает значение приглушения аудио/видео |
| состояние сети | Возвращает текущее состояние сети аудио/видео |
| приостановлено | Возвращает, приостановлено ли аудио/видео |
| скорость воспроизведения | Устанавливает или возвращает скорость воспроизведения аудио/видео |
| сыграно | Возвращает объект TimeRanges, представляющий воспроизводимые части аудио/видео |
| предварительная нагрузка | Устанавливает или возвращает значение загрузки аудио/видео при загрузке страницы |
| состояние готовности | Возвращает текущее состояние готовности аудио/видео |
| поиск | Возвращает объект TimeRanges, представляющий доступные для поиска части аудио/видео |
| поиск | Возвращает, ищет ли пользователь в данный момент аудио/видео |
| источник | Задает или возвращает текущий источник аудио/видеоэлемента |
| Дата начала | Возвращает объект Date, представляющий текущее смещение времени |
| текстовые треки | Возвращает объект TextTrackList, представляющий доступные текстовые дорожки. |
| видеотреки | Возвращает объект VideoTrackList, представляющий доступные видеодорожки |
| объем | Устанавливает или возвращает громкость аудио/видео |
HTML аудио/видео события
| событие | Описание |
|---|---|
| прервать | Срабатывает при прерывании загрузки аудио/видео |
| можно играть | Срабатывает, когда браузер может начать воспроизведение аудио/видео |
| можно проиграть | Срабатывает, когда браузер может воспроизводить аудио/видео без остановки для буферизации |
| изменение длительности | Срабатывает при изменении продолжительности аудио/видео |
| опорожнен | Срабатывает, когда текущий плейлист пуст |
| завершено | Срабатывает, когда текущий плейлист заканчивается |
| ошибка | Срабатывает при возникновении ошибки во время загрузки аудио/видео |
| загруженные данные | Срабатывает, когда браузер загрузил текущий кадр аудио/видео |
| загруженные метаданные | Срабатывает, когда браузер загрузил метаданные для аудио/видео |
| запуск нагрузки | Срабатывает, когда браузер начинает поиск аудио/видео |
| пауза | Срабатывает при паузе аудио/видео |
| играть | Срабатывает, когда аудио/видео было запущено или больше не приостановлено |
| игра | Срабатывает при воспроизведении аудио/видео после приостановки или остановки для буферизации |
| прогресс | Срабатывает, когда браузер загружает аудио/видео |
| изменение скорости | Срабатывает при изменении скорости воспроизведения аудио/видео |
| искал | Срабатывает, когда пользователь завершает перемещение/переход на новую позицию в аудио/видео |
| поиск | Срабатывает, когда пользователь начинает перемещаться/переходить на новую позицию в аудио/видео |
| заглох | Срабатывает, когда браузер пытается получить медиаданные, но данные не доступно |
| приостановить | Срабатывает, когда браузер намеренно не получает мультимедийные данные |
| обновление времени | Срабатывает при изменении текущей позиции воспроизведения |
| изменение громкости | Срабатывает при изменении громкости |
| ожидание | Срабатывает, когда видео останавливается, потому что ему нужно буферизовать следующий кадр |
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
908003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Демистификация HTML5 Video Player. В этом посте мы зайдем под капот… | by Eyevinn Technology
В этом посте мы познакомимся с HTML-видеоплеером для потокового видео. За исключением Apple и их браузера Safari, ни один браузер не содержит видеоплеер, который может воспроизводить любой из используемых форматов потокового видео. А Safari ограничен только поддержкой потокового формата HLS. Однако большинство современных браузеров вместо этого поддерживают API-интерфейсы HTML5, что позволяет создавать приложения Javascript для обработки воспроизведения видеопотоков. Давайте посмотрим, какие компоненты обычно входят в состав такого приложения.
API-интерфейсы HTML5, которые позволяют создавать видеопроигрыватель, — это MSE (расширения источника мультимедиа), EME (расширения зашифрованного мультимедиа) и VTTCue (для субтитров).
MSE API — это API для конвейера мультимедиа (аудио и видео) в браузере и предоставляет интерфейс для внутренних кодеков мультимедиа, которые декодируют аудио и видео. MSE не определяет, какие кодеки поддерживаются и специфичны для каждого браузера, однако большинство браузеров сегодня поддерживают аудио AVC (h364) и AAC, которое обычно используется сегодня. Для кодеков следующего поколения, таких как HEVC, VP9и AV1 поддержка гораздо более фрагментирована. Но пока вы не собираетесь переходить на 4K/UHD и выше, сегодня вы в «безопасности». EME API обеспечивает доступ к модулям расшифровки DRM (Digital Rights Management) (модуль расшифровки контента или CDM), и, как и в случае с кодеками, здесь не указан конкретный CDM, и это зависит от браузера, в котором они поддерживаются. API VTTCue является частью API WebVTT, который предоставляет способ предоставления сигналов WebVTT в DOM (API объектной модели документа).
Немного упрощенный процесс воспроизведения мультимедиа заключается в отправке незакодированных (а иногда и незашифрованных) видео- и аудиоданных в исходный буфер MSE, и если мультимедиа зашифровано, EME API запускает события для подтверждения связи с сервером лицензий DRM для информация, необходимая для расшифровки данных перед их отображением на экране.
Итак, если все это обрабатывается в браузере, что на самом деле остается делать в нашем приложении. Как оказалось, осталось довольно много. API-интерфейсы браузера не знают, что такое формат потокового видео. Он ограничен обработкой закодированных носителей, но то, как фактические данные извлекаются и собираются, выходит за рамки их возможностей. Давайте теперь пройдемся по компонентам, которые нам нужны в нашем приложении.
Анализатор манифеста отвечает за загрузку и анализ потокового манифеста. В зависимости от формата потоковой передачи фактическое содержание этого манифеста может различаться, но в целом он предоставляет приложению видеопроигрывателя все доступные параметры, предоставляемые сервером потоковой передачи. Доступные параметры включают, например, доступные аудиодорожки и дорожки субтитров, а также доступные различные качества видео. Информация о том, как получить доступ к доступным сегментам мультимедиа и загрузить их, также включена в этот манифест. Затем синтаксический анализатор может предоставить Player Engine информацию о доступных уровнях качества видео и пропускной способности, необходимой для каждого уровня качества.
Player Engine — это, по сути, «сердце» этого приложения. Движок решает, какие сегменты должен загружать загрузчик сегментов, и в ситуации, когда манифест динамически обновляется (для живого контента), он решает, когда должен быть получен новый манифест. После загрузки медиасегмента механизм отвечает за передачу аудио- и видеоданных в исходный буфер MSE, и если это сегмент субтитров, он передает данные субтитров анализатору субтитров. Player Engine также решает, когда следует переключиться на более высокий (или более низкий) уровень качества, основываясь на рекомендации диспетчера ABR или на переключении, указанном пользователем вручную.
Загрузчик сегментов отвечает за загрузку медиасегментов в соответствии с инструкциями Player Engine. Он также предоставляет информацию менеджеру ABR о том, сколько времени потребовалось для загрузки сегмента и насколько он велик. Это позволяет диспетчеру ABR оценить доступную полосу пропускания. Загрузчик сегментов также может обрабатывать логику повторных попыток загрузки сегментов, которые не удалось загрузить.
ABR Manager (Adapative Bitrate Manager) — это мозг эвристики ABR, которую реализует приложение проигрывателя. Различные эвристики ABR — это отдельная статья в блоге, но для упрощения речь идет о возможности прогнозировать изменения пропускной способности сети, чтобы избежать остановки воспроизведения видео (буферизация). Он постоянно оценивает доступную полосу пропускания и предлагает Player Engine, когда переключать уровень качества. Производительность этого компонента больше всего влияет на пользователя.
Оболочка запроса лицензии и Remuxer являются дополнительными компонентами и не всегда необходимы в зависимости от того, какие схемы защиты контента или форматы потоковой передачи необходимо поддерживать. Некоторые провайдеры DRM требуют, чтобы вы добавили некоторые дополнительные данные для согласования лицензии между CDM и сервером DRM, и об этом позаботится оболочка запроса лицензии. Remuxer необходим, если вы стремитесь поддерживать форматы потоковой передачи, в которых используются сегменты видео с форматом контейнера, который не поддерживается MSE.
В основном измените способ упаковки видеоданных, прежде чем помещать их в видеобуфер MSE. Например, HLS может содержать видеоданные AVC в контейнере MPEG-TS, которые необходимо переупаковать в контейнер MP4 перед отправкой в видеобуфер MSE.
Очевидно, что есть несколько компонентов, которые необходимо разработать, чтобы иметь возможность воспроизводить видеопоток. Должен ли я делать все с нуля? К счастью, нет. Существует ряд доступных приложений Javascript, которые уже делают это, например:
- Shaka Player (с открытым исходным кодом) поддерживает MPEG-DASH и имеет ограниченную поддержку HLS (в разработке).
- HLS.js (с открытым исходным кодом) поддерживает HLS.
- Flowplayer (открытый и коммерческий) поддерживает HLS (на основе HLS.js)
- Theoplayer (коммерческий) поддерживает MPEG-DASH и HLS
- Bitmovin Player (коммерческий) поддерживает MPEG-DASH и HLS
- RX Player поддерживает MPEG-DASH и Microsoft Smooth Streaming основные компоненты, необходимые для воспроизведения видеопотоков.
