Video html5 api: Video and Audio APIs — Learn web development

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?

Ответ:

&nbsp(1) <embed>&nbsp

&nbsp(2) <object>&nbsp

&nbsp(3) <video>&nbsp

&nbsp(4) <audio>&nbsp



Номер 2

Какой атрибут тега video задает URL видеофайла?

Ответ:

&nbsp(1) src&nbsp

&nbsp(2) poster&nbsp

&nbsp

(3) controls&nbsp



Номер 3

Какой атрибут тега <video> заставляет браузер отображать свои собственные элементы управления для воспроизведения и громкости?

Ответ:

&nbsp(1) src&nbsp

&nbsp(2) poster&nbsp

&nbsp(3) control&nbsp



Упражнение 2:


Номер 1

Какой атрибут тега <video>
задает ширину видеофайла?

Ответ:

&nbsp(1) width&nbsp

&nbsp(2) height&nbsp

&nbsp(3) poster&nbsp



Номер 2

Какой атрибут тега <video> задает высоту видеофайла?

Ответ:

&nbsp(1) width&nbsp

&nbsp(2) height&nbsp

&nbsp(3) poster&nbsp



Номер 3

Какой атрибут тега <video> задает обложку видеофайла?

Ответ:

&nbsp(1) width&nbsp

&nbsp(2) height&nbsp

&nbsp(3) poster&nbsp



Упражнение 3:


Номер 1

Какой атрибут тега <video> дает браузеру указание начинать воспроизведение видео автоматически?

Ответ:

&nbsp(1) autoplay&nbsp

&nbsp(2) autobuffer&nbsp

&nbsp(3) loop&nbsp



Номер 2

Какой атрибут тега <video> говорит браузеру, чтобы загрузка медиа начиналась немедленно?

Ответ:

&nbsp(1) autoplay&nbsp

&nbsp(2) autobuffer&nbsp

&nbsp(3) loop&nbsp



Номер 3

Какой атрибут тега <video> приводит к циклическому повторению воспроизведения видео?

Ответ:

&nbsp(1) autoplay&nbsp

&nbsp(2) autobuffer&nbsp

&nbsp(3) loop&nbsp



Упражнение 4:


Номер 1

Укажите корректные стандартные методы для создания на странице индивидуальных элементов управления медиа?

Ответ:

&nbsp(1) play()&nbsp

&nbsp(2) pause()&nbsp

&nbsp(3) stop()&nbsp



Номер 2

Укажите некорректные методы для создания на странице индивидуальных элементов управления медиа?

Ответ:

&nbsp(1) play()&nbsp

&nbsp(2) pause()&nbsp

&nbsp(3) stop()&nbsp



Номер 3

Укажите некорректные методы для создания на странице индивидуальных элементов управления медиа?

Ответ:

&nbsp(1) play()&nbsp

&nbsp(2) stop()&nbsp

&nbsp(3) reverse()&nbsp



Упражнение 5:


Номер 1

Какие из приведенных ниже видеокодеков имеют поддержку в браузерах без установки дополнительных плагинов:

Ответ:

&nbsp(1) ogg/theora&nbsp

&nbsp(2) H. 263&nbsp

&nbsp(3) H.264&nbsp

&nbsp(4) Sorenson&nbsp

&nbsp(5) WebM/VP8&nbsp



Номер 2

Какие из приведенных ниже видеокодеков не имеют поддержку в браузерах без установки дополнительных плагинов:

Ответ:

&nbsp(1) ogg/theora&nbsp

&nbsp(2) H.263&nbsp

&nbsp(3) H.264&nbsp

&nbsp(4) Sorenson&nbsp

&nbsp(5) WebM/VP8&nbsp



Номер 3

Какие из приведенных ниже видеокодеков имеют поддержку в браузерах без установки дополнительных плагинов:

Ответ:

&nbsp(1) ogg/theora&nbsp

&nbsp(2) H.264&nbsp

&nbsp(3) DivX&nbsp

&nbsp(4) On2 TrueMotion VP6&nbsp

&nbsp(5) WebM/VP8&nbsp



Упражнение 6:


Номер 1

Какой атрибут API видео HTML5 можно использовать для считывания или задания громкости аудио дорожки видео?

Ответ:

&nbsp(1) volume&nbsp

&nbsp(2) muted&nbsp

&nbsp(3) duration&nbsp



Номер 2

Какой атрибут API видео HTML5 позволяет заглушить звук в видео?

Ответ:

&nbsp(1) volume&nbsp

&nbsp(2) muted&nbsp

&nbsp(3) duration&nbsp



Номер 3

Какой атрибут API видео HTML5 возвращает текущую позицию воспроизведения в секундах?

Ответ:

&nbsp(1) initialTime&nbsp

&nbsp(2) currentTime&nbsp

&nbsp(3) startOffsetTime&nbsp



Упражнение 7:


Номер 1

Какое событие API видео HTML5 сообщает, что воспроизведение достигло конца видеофайла?

Ответ:

&nbsp(1) played&nbsp

&nbsp(2) paused&nbsp

&nbsp(3) ended&nbsp

&nbsp(4) loadeddata&nbsp



Номер 2

Какое событие API видео HTML5 сообщает, что браузер загрузил достаточно видео данных, чтобы начать воспроизведение в текущей позиции?

Ответ:

&nbsp(1) played&nbsp

&nbsp(2) paused&nbsp

&nbsp(3) ended&nbsp

&nbsp(4) loadeddata&nbsp



Номер 3

Какие события API видео HTML5 сообщают, что воспроизведение было начато или остановлено на паузу?

Ответ:

&nbsp(1) played&nbsp

&nbsp(2) paused&nbsp

&nbsp(3) ended&nbsp

&nbsp(4) loadeddata&nbsp



Упражнение 8:


Номер 1

С помощью какого элемента разметки HTML5 можно создавать на странице гибрид видео и другой графики?

Ответ:

&nbsp(1) <img>&nbsp

&nbsp(2) <canvas>&nbsp

&nbsp(3) <object>&nbsp



Номер 2

Какой элемент HTML5 определяет видео в альтернативном видеоформате?

Ответ:

&nbsp(1) <canvas>&nbsp

&nbsp(2) <source>&nbsp

&nbsp(3) <video>&nbsp



Номер 3

Какой элемент HTML5 вставляет звуковой или видеофайл для тегов <audio> и <video>?

Ответ:

&nbsp(1) <canvas>&nbsp

&nbsp(2) <source>&nbsp

&nbsp(3) <option>&nbsp



Упражнение 9:


Номер 1

Отметьте корректные способы задания дополнительного видеофайла в альтернативном формате:

Ответ:

&nbsp(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>&nbsp

&nbsp(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>&nbsp

&nbsp(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>&nbsp



Номер 2

Отметьте некорректные способы задания дополнительного видеофайла в альтернативном формате:

Ответ:

&nbsp(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>&nbsp

&nbsp(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>&nbsp

&nbsp(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>&nbsp



Номер 3

Отметьте корректные способы задания дополнительного видеофайла в альтернативном формате:

Ответ:

&nbsp(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>&nbsp

&nbsp(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>&nbsp

&nbsp(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>&nbsp



Упражнение 10:


Номер 1

Какие элементы разметки предназначены для вставки титров в видео HTML5? 

Ответ:

&nbsp(1) <track>&nbsp

&nbsp(2) <sub>&nbsp

&nbsp(3) <subtitle>&nbsp



Номер 2

Какие элементы разметки не предназначены для вставки титров в видео HTML5? 

Ответ:

&nbsp(1) <track>&nbsp

&nbsp(2) <sub>&nbsp

&nbsp(3) <subtitle>&nbsp



Номер 3

Какой формат титров поддерживается элементом <track>?

Ответ:

&nbsp(1) SSA&nbsp

&nbsp(2) ASS&nbsp

&nbsp(3) WebSRT&nbsp



Упражнение 11:


Номер 1

Какой из новых атрибутов тега <input> делает его пользовательским элементом управления медиа HTML5?

Ответ:

&nbsp(1) required&nbsp

&nbsp(2) placeholder&nbsp

&nbsp(3) aria-controls&nbsp



Номер 2

Какой элемент разметки устанавливает связь между текстовой меткой и элементом формы и используется при создании пользовательских элементов управления?

Ответ:

&nbsp(1) <title>&nbsp

&nbsp(2) <label>&nbsp

&nbsp(3) <name>&nbsp



Номер 3

Какой из стандартных атрибутов HTML5 позволяет назначить тегу клавишу управления?

Ответ:

&nbsp(1) accesskey&nbsp

&nbsp(2) tabindex&nbsp

&nbsp(3) contextmenu&nbsp



Упражнение 12:


Номер 1

Какой из атрибутов элементов управления ARIA позволяет задавать текущее значение ползунка?

Ответ:

&nbsp(1) aria-valuenow&nbsp

&nbsp(2) aria-value-min&nbsp

&nbsp(3) aria-value-max&nbsp



Номер 2

Какой из атрибутов элементов управления ARIA позволяет задавать минимальное значение, которое может иметь ползунок?

Ответ:

&nbsp(1) aria-valuenow&nbsp

&nbsp(2) aria-value-min&nbsp

&nbsp(3) aria-value-max&nbsp



Номер 3

Какой из атрибутов элементов управления ARIA позволяет задавать максимальное значение, которое может иметь ползунок?

Ответ:

&nbsp(1) aria-valuenow&nbsp

&nbsp(2) aria-value-min&nbsp

&nbsp(3) aria-value-max&nbsp



Главная / Интернет-технологии / Введение в 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 основные компоненты, необходимые для воспроизведения видеопотоков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *