hls.js
v1.5.18
HLS.JS - это библиотека JavaScript, которая реализует прямую трансляцию HTTP. Он опирается на расширения видео и навыки MediaSource HTML5 для воспроизведения.
Он работает путем передачи транспортного потока MPEG-2 и потоков AAC/MP3 в фрагменты ISO BMFF (MP4). Передача выполняется асинхронно с использованием веб -работника, когда доступно в браузере. HLS.JS также поддерживает HLS + FMP4, как было объявлено во время WWDC2016.
HLS.JS работает непосредственно на вершине стандартного элемента HTML <video> .
HLS.JS записывается в Ecmascript6 ( *.js ) и TypeScript ( *.ts ) (сильно напечатанный SuperSet of ES6) и транспилирован в ECMascript5 с использованием Babel и компилятора TypeScript.
Rollup используется для построения дистрибутивного пакета и обслуживания местной среды разработки.
Для получения подробной информации о формате HLS и значениях этих тегов см. Https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis
#EXT-X-STREAM-INF:<attribute-list> <URI>#EXT-X-MEDIA:<attribute-list>#EXT-X-SESSION-DATA:<attribute-list>#EXT-X-SESSION-KEY:<attribute-list> Выбор и предварительная загрузка EME и предварительная загрузка#EXT-X-START:TIME-OFFSET=<n>#EXT-X-CONTENT-STEERING:<attribute-list> управление контентом#EXT-X-DEFINE:<attribute-list> замена переменной ( NAME,VALUE,QUERYPARAM ) #EXTM3U (игнорируется)#EXT-X-INDEPENDENT-SEGMENTS (игнорируются)#EXT-X-VERSION=<n> (значение игнорируется)#EXTINF:<duration>,[<title>]#EXT-X-ENDLIST#EXT-X-MEDIA-SEQUENCE=<n>#EXT-X-TARGETDURATION=<n>#EXT-X-DISCONTINUITY#EXT-X-DISCONTINUITY-SEQUENCE=<n>#EXT-X-BITRATE#EXT-X-BYTERANGE=<n>[@<o>]#EXT-X-MAP:<attribute-list>#EXT-X-KEY:<attribute-list> ( KEYFORMAT="identity",METHOD=SAMPLE-AES поддерживает только сегменты MPEG-2 TS)#EXT-X-PROGRAM-DATE-TIME:<attribute-list>#EXT-X-START:TIME-OFFSET=<n>#EXT-X-SERVER-CONTROL:<attribute-list>#EXT-X-PART-INF:PART-TARGET=<n>#EXT-X-PART:<attribute-list>#EXT-X-SKIP:<attribute-list> Delta Playlists#EXT-X-RENDITION-REPORT:<attribute-list>#EXT-X-DATERANGE:<attribute-list> > метаданные#EXT-X-DEFINE:<attribute-list> Импорт и замена переменной ( NAME,VALUE,IMPORT,QUERYPARAM )#EXT-X-GAP (пропускает сегменты и детали разрыва загрузки. Пропускает воспроизведение бессмысленной программы, содержащей только содержание зазоров и без подходящих альтернатив. См. #2940)Проанализировано, но отсутствующая поддержка функций:
#EXT-X-PRELOAD-HINT:<attribute-list> (см. #5074)Полный список вопросов см. Вкладку «главные приоритеты» на вкладке «Планирование выпуска» и «Проект». Поддержка кодека зависит от среды выполнения (например, не всех браузеров в одной и той же поддержке ОС HEVC).
#EXT-XI-FRAME-STREAM-INF -frame mediaillist filesREQ-VIDEO-LAYOUT не используется в фильтрации или выборе вариантаSAMPLE-AES клавиш с FMP4, AAC, MP3, VTT ... сегменты (только MPEG-2 TS)require от времени выполнения Node.jsВы можете безопасно требовать этой библиотеки в узле, и абсолютно ничего не произойдет . Фиктивное объект экспортируется, так что требуется, чтобы библиотека не бросала ошибку. HLS.JS не является мгновенным в node.js. Смотрите #1841 для более подробной информации.
Во -первых, проверьте репозиторий и установите необходимые зависимости
git clone https://github.com/video-dev/hls.js.git
cd hls.js
# After cloning or pulling from the repository, make sure all dependencies are up-to-date
npm install ci
# Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)
npm run dev
# After making changes run the sanity-check task to verify all checks before committing changes
npm run sanity-checkDev Server будет размещать файлы на порту 8000. После начала демо можно найти по адресу http: // localhost: 8000/demo/.
Перед отправкой PR, пожалуйста, посмотрите наши рекомендации по вкладу. Присоединяйтесь к обсуждению Slack через видео-dev.org в #HLSJS для обновлений и вопросов о разработке.
Создайте все ароматы (подходящие для режима Prod/CI):
npm install ci
npm run build
Только артефакты режима отладки:
npm run build:debug
Стройте и смотрите (настроенные настройки разработчиков, где вы захотите провести другой сервер - например, в подмодуле/проекте)
npm run build:watch
Только конкретный вкус (известные конфи: отладка, расстояние, свет, светово-демонист, демонстрация):
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
Примечание: конфигурация «демонстрация» всегда создана.
Примечание: hls.light.*.js DIST-файлы не включают альтернативную аудио, субтитры, CMCD, EME (DRM) или поддержку переменной замены. Кроме того, следующие типы недоступны в световой сборке:
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerЗапустить Linter:
npm run lint
Запустите Linter в режиме автоматической фикса:
npm run lint:fix
Запустите Linter только с ошибками (без предупреждений)
npm run lint:quiet
Запустите красивее код формата
npm run prettier
Запустите проверку типа для проверки типов типографии
npm run type-check
Запустите все тесты одновременно:
npm test
Запустить модульные тесты:
npm run test:unit
Запустите модульные тесты в режиме наблюдения:
npm run test:unit:watch
Запустите функциональные (интеграционные) тесты:
npm run test:func
Обзор дизайна этого проекта, его модули, события и обработка ошибок можно найти здесь.
Примечание вы можете получить доступ к документам для конкретной версии с помощью «https://github.com/video-dev/hls.js/tree/deployments»
https://hlsjs.video-dev.org/demo
https://hlsjs-dev.video-dev.org/demo
Найдите коммит на https://github.com/video-dev/hls.js/tree/deployments.
HLS.JS совместим только с браузерами, поддерживающими API MediaSource Extensions (MSE) с входами типа «Видео/MP4».
HLS.JS поддерживается на:
Полифилл обещания требуется в браузерах, пропущенных поддержкой нативного обещания.
Пожалуйста, обрати внимание:
Браузеры Safari (iOS, iPados и MacOS) имеют встроенную поддержку HLS с помощью URL-адреса источника «тег». См. Пример ниже (используя HLS.JS), чтобы запустить соответствующее обнаружение функций и выберите между использованием HLS.JS или изначально встроенной поддержки HLS.
Когда платформа не имеет ни MediaSource, ни нативной поддержки HLS, браузер не может играть в HLS.
Имейте в виду, что если намерение состоит в том, чтобы поддерживать HLS на нескольких платформах, помимо тех, которые совместимы с HLS.JS, потоки HLS должны строго следить за спецификациями RFC8216, особенно если следует поддерживать приложения, интеллектуальные телевизоры и отдельные коробки.
Найдите матрицу поддержки MediaSource API здесь: https://developer.mozilla.org/en-us/docs/web/api/mediasource
Предварительные сборки включены в каждый релиз. Или установите HLS.JS как зависимость вашего проекта:
npm install --save hls.jsКанарский канал также доступен, если вы предпочитаете работать от филиала разработки (Master):
npm install hls.js@canary
Непосредственно включите Dist/Hls.js или Dist/hls.min.js в тег скрипта на странице. Эта настройка приоритет HLS.JS MSE воспроизведение над поддержкой Native Browser для воспроизведения HLS в HTMLMedieElements:
< script src =" https://cdn.jsdelivr.net/npm/hls.js@1 " > </ script >
<!-- Or if you want the latest version from the main branch -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
< video id =" video " > </ video >
< script >
var video = document . getElementById ( 'video' ) ;
var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' ;
if ( Hls . isSupported ( ) ) {
var hls = new Hls ( ) ;
hls . loadSource ( videoSrc ) ;
hls . attachMedia ( video ) ;
}
// HLS.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using HLS.js.
else if ( video . canPlayType ( 'application/vnd.apple.mpegurl' ) ) {
video . src = videoSrc ;
}
</ script > Чтобы сначала проверить поддержку нативного браузера, а затем отступить на HLS.JS, поменяйте эти условия. Посмотрите этот комментарий, чтобы понять некоторые компромиссы.
< script src =" https://cdn.jsdelivr.net/npm/hls.js@1 " > </ script >
<!-- Or if you want the latest version from the main branch -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
< video id =" video " > </ video >
< script >
var video = document . getElementById ( 'video' ) ;
var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' ;
//
// First check for native browser HLS support
//
if ( video . canPlayType ( 'application/vnd.apple.mpegurl' ) ) {
video . src = videoSrc ;
//
// If no native HLS support, check if HLS.js is supported
//
} else if ( Hls . isSupported ( ) ) {
var hls = new Hls ( ) ;
hls . loadSource ( videoSrc ) ;
hls . attachMedia ( video ) ;
}
</ script > HLS Транскодирование оригинального видеофайла часто немного продвигает время первого кадра. Если вы зависите от точного сопоставления времени кадров между оригинальным видео и HLS -потоком, вам необходимо учитывать это:
let tOffset = 0 ;
const getAppendedOffset = ( eventName , { frag } ) => {
if ( frag . type === 'main' && frag . sn !== 'initSegment' && frag . elementaryStreams . video ) {
const { start , startDTS , startPTS , maxStartPTS , elementaryStreams } = frag ;
tOffset = elementaryStreams . video . startPTS - start ;
hls . off ( Hls . Events . BUFFER_APPENDED , getAppendedOffset ) ;
console . log ( 'video timestamp offset:' , tOffset , { start , startDTS , startPTS , maxStartPTS , elementaryStreams } ) ;
}
}
hls . on ( Hls . Events . BUFFER_APPENDED , getAppendedOffset ) ;
// and account for this offset, for example like this:
const video = document . querySelector ( 'video' ) ;
video . addEventListener ( 'timeupdate' , ( ) => setTime ( Math . max ( 0 , video . currentTime - tOffset ) )
const seek = ( t ) => video . currentTime = t + tOffset ;
const getDuration = ( ) => video . duration - tOffset ;Для получения дополнительных примеров API см. Docs/api.md.
Все ресурсы HLS должны быть доставлены с заголовками CORS, позволяющих GET запросы.
Видео контролируется с помощью HTML <video> Элемент HTMLVideoElement Методы, события и дополнительные элементы управления пользовательским интерфейсом ( <video controls> ).
Следующие игроки интегрируют HLS.JS для воспроизведения HLS:
 | |||
| CDN77 | |||
Сделано Грамк, играет HLS из адресной панели и ссылок M3U8
HLS.JS выпускается по лицензии Apache 2.0
