Программные решения для построения онлайн-вещания


Проигрывание SLDP в HTML5

Проигрывание с ультра-низкой задержкой в JavaScript плеере

SLDP - это протокол потоковой передачи, основанный на WebSockets, поэтому потоки на его основе могут приниматься любым современным браузером.

Основные возможности включают в себя:

  • Задержка проигрывания менее чем на секунду, с использованием buffer offset по необходимости.
  • Видео H.264/AVC, VP8, VP9.
  • Аудио AAC во всех браузерах.
  • Аудио MP3 в Safari и Firefox.
  • Адаптивный битрейт (ABR) с автоматическим переключением между разрешениями согласно пропускной способности сети. Время переключения ограничено только размером GOP в исходном потоке.
  • Средства доставки - HTTP и HTTPS поверх TCP, что означает отсутствие необходимости в специальных сетевых настройках.

Также обратите внимание на часто задаваемые вопросы, в которых раскрываются преимущества и самые интересные техники использования SDLP.

Поддержка в браузерах

Проигрывание SLDP в браузерах происходит через MSE. Плеер создан на Javascript и его можно встраивать в любую страницу на HTML5.

На данный момент эта технология поддерживается в Chrome, Firefox, Safari, Microsoft Edge и Chromium на платформах Windows, Linux, macOS, Android и Safari на iPad iOS.
Проигрывание в обычном iOS пока недоступна. Тем не менее, можно установить SLDP Player для iOS, который открывается при нажатии на ссылки sldp:// и sldps:// в браузере. Можете также создать своё собственное приложение для iOS для проигрывания SLDP с помощью нашего SLDP Player SDK.

Браузеры IE 11 и Microsoft Edge требуют в буфере не менее 3х секунд перед началом потока. SLDP плеер будет иметь дополнительную задержку в этом случае.


Скачать и встроить

Плеер SLDP можно бесплатно скачать . Описание релизов можно посмотреть здесь.

Скачав плеер себе на сервер, вы можете встраивать его на страницы как показано ниже.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="sldp-v2.12.2.min.js"></script>
</head>
<body>
<div id="player"></div>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", initPlayer);

function initPlayer(){
sldpPlayer = SLDP.init({
container: 'player',
stream_url: "ws://123.123.123.123:8081/live/stream",
initial_resolution: '240p',
buffering: 500,
autoplay: false,
height: 480,
width: 424
});
};

function removePlayer(){
sldpPlayer.destroy()
}
</script>
</body>
</html>

Параметры управления

Параметры ниже можно использовать для настройки плеера.

  • container задаёт, какой элемент использовать для отображения
  • stream_url задаёт URL для соединения с источником контента. Этот источник должен иметь поддержку SLDP на вывод. Например, вы можете использовать Nimble Streamer.
  • autoplay задаёт, проигрывать ли поток сразу после инициализации плеера. Не все современные браузеры позволяют автоматический старт плеера со звуком, поэтому для соответствия этому ограничению на старте можно использовать параметр muted.
  • muted выключает звук плеера на старте. Может быть полезен для автоматического старта видео в современных браузерах.
  • width задаёт ширину плеера. Допустимые значения: целое число (размер в пикселях), либо строка 'parent' (занимает 100% ширины родительского элемента).
  • height задаёт высоту плеера. Допустимые значения: целое число (размер в пикселях), либо строка 'parent' (занимает 100% высоты родительского элемента).
  • initial_resolution - это разрешение потока по умолчанию в случае использования ABR.
  • buffering задаёт буфер плеера в миллисекундах. Значение по умолчанию 1000 (1 секунда).
  • offset позволяет уменьшить время начала проигрывания. Подробнее читайте в этой статье.
  • latency_tolerance параметр сохранения задержки потока, задается в миллисекундах. Когда изначальная задержка становится больше заданной величины (по любой причине, например, задержки сети или производительности процессора), данный параметр позволяет плееру восстановить изначальную задержку в момент, когда это становится возможным. Важно понимать, что сохранение задержки потока имеет свою цену, потому как плеер пропускает часть потока, чтобы уменьшить задержку. Приблизительной аналогией может быть телевизионная трансляция, когда показываются искаженные кадры, при этом видеопоток не задерживается. Подробнее читайте в этой статье. Рекомендуемое минимальное значение 400-500 миллисекунд, 0 - параметр выключен.
  • splash_screen задает URL к изображению заставки.
  • adaptive_bitrate включает или выключет ABR. "true" (по умолчанию) - включено, "false" - выключено.
  • pause_timeout задает период во время паузы, в течение которого соединение с медиа-сервером поддерживается, после чего разрывается. Этот параметр позволяет сократить количество ненужного трафика от сервера к клиенту в случае долгой паузы.
  • key_frame_alignment позволяет достичь гладкого переключения между разными качествами, если ключевые кадры во всех качествах имеют одинаковые временные метки. Значение по умолчанию false.
  • controls определяет, будут ли доступны для пользователя элементы управления плеером, такие как старт, пауза, регулятор громкости, и т.д. Значение по умолчанию true.
  • audio_only включает у плеера режим "только звук". В этом режиме воспроизводится только аудио составляющая заданного SLDP потока и пользовательский интерфейс сокращается до панели с кнопками управления. Значение по умолчанию false.
  • audio_title заголовок плеера, который отображается в режиме "только звук". По умолчанию не задан.
  • reconnects количество попыток переподключения, которые SLDP плеер предпринимает при потере соединения с медиа-сервером. Значение должно быть больше 0, по умолчанию 10. Первые пять попыток производятся по одной в секунду, остальные - через каждые 5 секунд.
  • muteable включает автоматическую компенсацию отсутствующего аудиопотока. Данный параметр необходим, если целевой поток не содержит аудио составляющей, когда он заглушен. Значение по умолчанию false.
  • fullscreen задает старт плеера в полноэкранном режиме. По умолчанию false.
  • ios_failback_app_url URL приложения для воспроизведения SLDP потока на iOS. По умолчанию SLDP Player. В этой статье можно прочитать об этом подробнее.
  • ios_failback_scheme схема для воспроизведения SLDP потока при незащищенном соединении (ws://). По умолчанию 'sldp'
  • ios_failback_secure_scheme схема для воспроизведения SLDP потока при защищенном соединении (wss://). По умолчанию 'sldps'
  • aspect_ratio (только SDK) задает соотношение сторон к которому будет приведено видео, например '16:9'.

Вы можете использовать SLDP плеер бесплатно без ограничений. Однако, техподдержка оказывается только клиентам SDK.

SLDP Player SDK

Премиальный пакет SDK содержит JavaScript-библиотеку, у которой есть дополнительный API для управления.
На странице SDK можно узнать больше об SDK.

SDK доступен только для подписчиков. Оформив подписку, вы сможете получать обновления и техподдержку.

Купить SDK

Можно попробовать плеер в работе на этой странице, если SLDP уже настроен у вас в Nimble Streamer.
Демо-страница Nimble Advertizer показывает работу SLDP с вставленной на сервере рекламой через SLDP HTML5 плеер.