hls.js
v1.5.18
HLS.JS es una biblioteca JavaScript que implementa un cliente de transmisión en vivo HTTP. Se basa en HTML5 Video y MediaSource Extensions para reproducción.
Funciona transmuitando la transmisión de transporte MPEG-2 y las transmisiones AAC/MP3 en fragmentos ISO BMFF (MP4). La transmuxing se realiza de manera asincrónica utilizando un trabajador web cuando está disponible en el navegador. HLS.JS también admite HLS + FMP4, como se anuncia durante WWDC2016.
HLS.JS funciona directamente sobre un elemento HTML estándar <video> .
HLS.JS está escrito en ECMAScript6 ( *.js ) y TypeScript ( *.ts ) (Superset fuertemente escrito de ES6), y se transpila en ECMAScript5 usando Babel y el compilador TypeScript.
El rollo se utiliza para construir el paquete de distribución y servir al entorno de desarrollo local.
Para obtener detalles sobre el formato HLS y los significados de estas etiquetas, 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> EME Key-System Selection and Prelading#EXT-X-START:TIME-OFFSET=<n>#EXT-X-CONTENT-STEERING:<attribute-list> Content Dirección#EXT-X-DEFINE:<attribute-list> Sustitución de variable ( NAME,VALUE,QUERYPARAM ) #EXTM3U (ignorado)#EXT-X-INDEPENDENT-SEGMENTS (ignorado)#EXT-X-VERSION=<n> (se ignora el valor)#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 solo es compatible con los 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> listas de reproducción delta#EXT-X-RENDITION-REPORT:<attribute-list>#EXT-X-DATERANGE:<attribute-list> metadatos#EXT-X-DEFINE:<attribute-list> Importación y sustitución de variables ( NAME,VALUE,IMPORT,QUERYPARAM )#EXT-X-GAP (omita los segmentos de la brecha de carga y las piezas. Onda la reproducción del programa sin topar que contiene contenido de brecha y sin alternativas adecuadas. Ver #2940)Soporte de características analizado pero faltante:
#EXT-X-PRELOAD-HINT:<attribute-list> (ver #5074)Para obtener una lista completa de problemas, consulte "Prioridades principales" en la pestaña Planificación de lanzamientos y del proyecto de retraso. El soporte de códec depende del entorno de tiempo de ejecución (por ejemplo, no todos los navegadores en el mismo soporte del sistema operativo HEVC).
#EXT-XI-FRAME-STREAM-INF LIST MEDIA DE LISTA DE MEDIOSREQ-VIDEO-LAYOUT no se usa en filtrado o selección de variantesSAMPLE-AES de formato "Identity" con FMP4, AAC, MP3, VTT ... Segmentos (solo MPEG-2 TS)require desde un tiempo de ejecución de Node.jsPuede requerir de manera segura esta biblioteca en el nodo y no pasará absolutamente nada . Se exporta un objeto ficticio para que requerir la biblioteca no arroje un error. HLS.JS no es instanciable en Node.js. Ver #1841 para más detalles.
Primero, consulte el repositorio e instale las dependencias requeridas
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-checkEl servidor Dev alojará archivos en el puerto 8000. Una vez iniciado, la demostración se puede encontrar en http: // localhost: 8000/demo/.
Antes de enviar un PR, consulte nuestras pautas de contribución. Únase a la discusión en Slack a través de video-dev.org en #HLSJS para actualizaciones y preguntas sobre el desarrollo.
Construya todos los sabores (adecuado para el modo de prod/CI):
npm install ci
npm run build
Solo artefactos en modo de depuración:
npm run build:debug
Build and Watch (configuraciones de desarrollo personalizadas donde desee alojar a través de otro servidor, por ejemplo, en un submódulo/proyecto)
npm run build:watch
Solo el sabor específico (las configuraciones conocidas son: depuración, distrito, luz, luz de luz, demostración):
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
Nota: La configuración de "demostración" siempre está construida.
Nota: Los archivos hls.light.*.js DIST no incluyen Audio alternativo, Subtítulos, CMCD, EME (DRM) o soporte de sustitución variable. Además, los siguientes tipos no están disponibles en la construcción de la luz:
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerEjecutar el linter:
npm run lint
Ejecute un linter con modo automático:
npm run lint:fix
Ejecutar un enlace solo con errores (sin advertencias)
npm run lint:quiet
Ejecutar el código de formato más bonito
npm run prettier
Ejecutar comprobación de tipo para verificar los tipos de mecanografiado
npm run type-check
Ejecute todas las pruebas a la vez:
npm test
Ejecutar pruebas unitarias:
npm run test:unit
Ejecutar pruebas unitarias en modo de reloj:
npm run test:unit:watch
Ejecutar pruebas funcionales (integración):
npm run test:func
Aquí se puede encontrar una descripción general del diseño de este proyecto, sus módulos, eventos y manejo de errores.
Tenga en cuenta que puede acceder a los documentos para una versión en particular usando "https://github.com/video-dev/hls.js/tree/deployments"
https://hlsjs.video-dev.org/demo
https://hlsjs-dev.video-dev.org/demo
Encuentre el compromiso en https://github.com/video-dev/hls.js/tree/deployments.
HLS.JS solo es compatible con los navegadores que admiten la API de MediaSource Extensions (MSE) con entradas de tipo MIME 'Video/MP4'.
HLS.JS es compatible con:
Se requiere una promesa de polyfill en los navegadores que faltan soporte de promesa nativa.
Tenga en cuenta:
Los navegadores Safari (iOS, iPados y macOS) tienen soporte HLS incorporado a través de la URL de origen "etiqueta" de video simple. Consulte el siguiente ejemplo (usando HLS.JS) para ejecutar la detección de características apropiada y elija entre el uso de HLS.JS o el soporte HLS incorporado de forma nativa.
Cuando una plataforma no tiene soporte de MediaSource ni HLS nativo, el navegador no puede jugar HLS.
Tenga en cuenta que si la intención es admitir HLS en múltiples plataformas, más allá de las compatibles con HLS.JS, las transmisiones de HLS deben seguir estrictamente las especificaciones de RFC8216, especialmente si las aplicaciones, los televisores inteligentes y los decodificadores deben ser compatibles.
Encuentre una matriz de soporte de la API de MediaSource aquí: https://developer.mozilla.org/en-us/docs/web/api/mediasource
Las construcciones preempaquetadas se incluyen con cada lanzamiento. O instale el HLS.JS como una dependencia de su proyecto:
npm install --save hls.jsTambién está disponible un canal canario si prefiere trabajar fuera de la rama de desarrollo (maestro):
npm install hls.js@canary
Incluya directamente Dist/HLS.JS o DIST/HLS.min.js en una etiqueta de script en la página. Esta configuración prioriza la reproducción HLS.JS MSE sobre el soporte de navegador nativo para la reproducción de HLS en 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 primero el soporte del navegador nativo y luego alojamiento a HLS.js, intercambie estos condicionales. Vea este comentario para comprender algunas de las compensaciones.
< 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 > La transcodificación de HLS de un archivo de video original a menudo empuja un poco el tiempo del primer cuadro. Si depende de tener una coincidencia exacta de los tiempos de marco entre el video original y la transmisión HLS, debe tener en cuenta esto:
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 más ejemplos de incrustación y API, consulte Docs/API.MD.
Todos los recursos de HLS deben entregarse con los encabezados CORS que permiten GET solicitudes.
El video se controla a través de métodos HTML <video> Elemento HTMLVideoElement , eventos y controles de interfaz de usuario opcionales ( <video controls> ).
Los siguientes jugadores integran HLS.js para la reproducción de HLS:
 | |||
| CDN77 | |||
Hecho por Gramk, juega HLS desde la barra de direcciones y los enlaces M3U8
HLS.JS se lanza bajo la licencia Apache 2.0
