hls.js
v1.5.18
O HLS.JS é uma biblioteca JavaScript que implementa um cliente de transmissão ao vivo HTTP. Ele depende de extensões de vídeo e mídia HTML5 para reprodução.
Funciona transmunciando o fluxo de transporte MPEG-2 e fluxos AAC/MP3 para fragmentos ISO BMFF (MP4). A transmuxação é realizada de forma assíncrona usando um trabalhador da web quando disponível no navegador. O HLS.JS também suporta HLS + FMP4, conforme anunciado durante o WWDC2016.
O HLS.JS trabalha diretamente no topo de um elemento HTML <video> padrão.
O HLS.JS está escrito no ECMAScript6 ( *.js ) e no TypeScript ( *.ts ) (supereset fortemente digitado de ES6) e transpilado no ECMAScript5 usando Babel e o compilador de texto.
Rollup é usado para construir o pacote de distro e servir o ambiente de desenvolvimento local.
Para detalhes sobre o formato HLS e os significados dessas tags, consulte 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>#EXT-X-START:TIME-OFFSET=<n>#EXT-X-CONTENT-STEERING:<attribute-list> Direção de conteúdo#EXT-X-DEFINE:<attribute-list> Substituição variável ( NAME,VALUE,QUERYPARAM ) #EXTM3U (ignorado)#EXT-X-INDEPENDENT-SEGMENTS (ignorado)#EXT-X-VERSION=<n> (o valor é ignorado)#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 é suportado apenas com segmentos 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> lists de reprodução delta#EXT-X-RENDITION-REPORT:<attribute-list>#EXT-X-DATERANGE:<attribute-list> metadados#EXT-X-DEFINE:<attribute-list> Importação e substituição variável ( NAME,VALUE,IMPORT,QUERYPARAM )#EXT-X-GAP (pula os segmentos de lacuna de carregamento e peças. Pula a reprodução do programa não sofrido contendo apenas conteúdo de lacunas e sem suplentes adequados. Consulte #2940)Parsed, mas ausente, suporte de recurso:
#EXT-X-PRELOAD-HINT:<attribute-list> (ver #5074)Para obter uma lista completa de questões, consulte "Primeiras prioridades" na guia Planejamento de liberação e projeto de atraso. O suporte ao codec depende do ambiente de tempo de execução (por exemplo, nem todos os navegadores do mesmo SO suportam o HEVC).
#EXT-XI-FRAME-STREAM-INF -frame mídia playlist arquivosREQ-VIDEO-LAYOUT não é usado em filtragem ou seleção de variantesSAMPLE-AES Method Keys com FMP4, AAC, MP3, VTT ... segmentos (somente MPEG-2 TS)require a partir de um tempo de execução do Node.jsVocê pode exigir com segurança esta biblioteca no nó e absolutamente nada acontecerá . Um objeto dummy é exportado para que exigir a biblioteca não apresente um erro. Hls.js não é instantável no node.js. Veja #1841 para mais detalhes.
Primeiro, consulte o repositório e instale as dependências necessárias
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-checkO servidor de desenvolvimento hospedará arquivos na porta 8000. Depois de iniciado, a demonstração pode ser encontrada em execução em http: // localhost: 8000/demonstração/.
Antes de enviar um PR, consulte nossas diretrizes de contribuição. Participe da discussão sobre o Slack via vídeo-dev.org em #HLSJS para obter atualizações e perguntas sobre desenvolvimento.
Construa todos os sabores (adequados para mode/ci):
npm install ci
npm run build
Apenas artefatos no modo de depuração:
npm run build:debug
Construa e relógio (configurações de dev personalizadas, onde você deseja hospedar através de outro servidor - por exemplo, em um sub -módulo/projeto)
npm run build:watch
Somente o sabor específico (as configurações conhecidas são: Debug, Dist, Light, Light-Dist, Demo):
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
Nota: A configuração "Demo" é sempre construída.
NOTA: hls.light.*.js Além disso, os seguintes tipos não estão disponíveis na construção da luz:
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerExecutar Linter:
npm run lint
Execute Linter com modo de fixação automática:
npm run lint:fix
Execute o Linter apenas com erros (sem avisos)
npm run lint:quiet
Execute mais bonito para formatar o código
npm run prettier
Execute o tipo de check para verificar os tipos de descrito
npm run type-check
Execute todos os testes de uma só vez:
npm test
Executar testes de unidade:
npm run test:unit
Execute testes de unidade no modo de relógio:
npm run test:unit:watch
Executar testes funcionais (integração):
npm run test:func
Uma visão geral do design deste projeto, são módulos, eventos e manuseio de erros podem ser encontrados aqui.
Observe que você pode acessar os documentos para uma versão específica usando "https://github.com/video-dev/hls.js/tree/deplayments"
https://hlsjs.video-dev.org/demo
https://hlsjs-dev.video-dev.org/demo
Encontre o compromisso em https://github.com/video-dev/hls.js/tree/deploymentmments.
O HLS.JS é compatível apenas com os navegadores que suportam as extensões de mídia (MSE) com as entradas do tipo MIME MIDE/MP4.
Hls.js é suportado em:
Uma promessa é necessária em navegadores que faltam suporte à promessa nativa.
Observe:
Os navegadores Safari (iOS, iPados e macOS) têm suporte de HLS embutido através do URL de origem "tag" de vídeo simples. Veja o exemplo abaixo (usando HLS.JS) para executar a detecção de recursos apropriada e escolha entre usar o HLS.js ou o suporte de HLS interno nativamente.
Quando uma plataforma não possui suporte para MediaSource nem HLS nativo, o navegador não pode reproduzir o HLS.
Lembre-se de que, se a intenção é suportar o HLS em várias plataformas, além das compatíveis com o HLS.JS, os fluxos HLS precisam seguir estritamente as especificações do RFC8216, especialmente se aplicativos, TVs inteligentes e caixas de cenário devem ser suportadas.
Encontre uma matriz de suporte da API MediaSource aqui: https://developer.mozilla.org/en-us/docs/web/api/mediasource
As compilações pré -embaladas estão incluídas em cada liberação. Ou instale o HLS.JS como uma dependência do seu projeto:
npm install --save hls.jsUm canal canário também está disponível se você preferir resolver o ramo de desenvolvimento (mestre):
npm install hls.js@canary
Inclua diretamente o Dist/HLS.js ou Dist/Hls.min.js em uma tag de script na página. Esta configuração prioriza a reprodução do HLS.JS MSE sobre o suporte ao navegador nativo para a reprodução do HLS no HTMLMediaelements:
< 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 > Para verificar o suporte ao navegador nativo primeiro e depois o fallback do HLS.JS, troque esses condicionais. Veja este comentário para entender algumas das compensações.
< 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 > A transcodificação do HLS de um arquivo de vídeo original geralmente empurra um pouco o tempo do primeiro quadro. Se você depende de ter uma correspondência exata dos tempos de quadro entre o vídeo original e o fluxo HLS, precisará explicar isso:
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 ;Para mais exemplos de incorporação e API, consulte Docs/Api.md.
Todos os recursos do HLS devem ser entregues com os cabeçalhos CORS que permitem GET solicitações.
<video> vídeo é controlado por meio de métodos, eventos e controles opcionais da interface do HTMLVideoElement ( <video controls> ).
Os seguintes jogadores integram o HLS.JS para a reprodução do HLS:
 | |||
| CDN77 | |||
Feito pela Gramk, reproduz HLS na barra de endereço e links M3U8
HLS.JS é liberado pela licença Apache 2.0
