hls.js
v1.5.18
HLS.JS ist eine JavaScript -Bibliothek, die einen HTTP -Live -Streaming -Client implementiert. Es stützt sich auf HTML5 -Video- und MediaSource -Erweiterungen für die Wiedergabe.
Es funktioniert, indem es MPEG-2-Transportstrom und AAC/MP3-Streams in ISO BMFF (MP4) -Pragmente überträgt. Das Transmuxing wird asynchron mit einem Webworker durchgeführt, wenn im Browser verfügbar ist. HLS.JS unterstützt auch HLS + FMP4, wie in WWDC2016 angekündigt.
HLS.js arbeitet direkt über einem Standard -HTML <video> Element.
Hls.js ist in ECMascript6 ( *.js ) und TypeScript ( *.ts ) (stark typisierte Superset von ES6) geschrieben und in ECMAScript5 mit Babel und dem Typenkript Compiler in EcMascript5 transpiliert.
Rollup wird verwendet, um das Distribastpaket zu bauen und die lokale Entwicklungsumgebung zu dienen.
Weitere Informationen zum HLS-Format und den Bedeutungen dieser Tags finden Sie unter 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-Auswahl und Vorspannung#EXT-X-START:TIME-OFFSET=<n>#EXT-X-CONTENT-STEERING:<attribute-list> Inhaltssteuerung#EXT-X-DEFINE:<attribute-list> Variable Substitution ( NAME,VALUE,QUERYPARAM Attribute) #EXTM3U (ignoriert)#EXT-X-INDEPENDENT-SEGMENTS (ignoriert)#EXT-X-VERSION=<n> (Wert wird ignoriert)#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 wird nur mit MPEG-2 TS-Segmenten unterstützt)#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-Wiedergabelisten#EXT-X-RENDITION-REPORT:<attribute-list>#EXT-X-DATERANGE:<attribute-list> Metadaten#EXT-X-DEFINE:<attribute-list> Variable Import und Substitution ( NAME,VALUE,IMPORT,QUERYPARAM Attribute)#EXT-X-GAP (überspringt Ladungslückensegmente und Teile. Überschneidet die Wiedergabe von nicht leichterem Programm mit nur Lückeninhalten und keine geeigneten Alternativen. Siehe #2940)Analyse, aber fehlende Funktionsunterstützung:
#EXT-X-PRELOAD-HINT:<attribute-list> (siehe #5074)Eine vollständige Liste von Problemen finden Sie in der Registerkarte "Top -Prioritäten" auf der Registerkarte Release Planning and Backlog. Die Codec -Unterstützung hängt von der Laufzeitumgebung ab (z. B. nicht alle Browser auf demselben OS -Unterstützung HEVC).
#EXT-XI-FRAME-STREAM-INF -Frame Media Playlist-DateienREQ-VIDEO-LAYOUT wird bei der Variantenfilterung oder Auswahl nicht verwendetSAMPLE-AES Methodeschlüssel mit FMP4, AAC, MP3, VTT ... Segmenten (nur MPEG-2 TS)require von einer Laufzeit von Node.jsSie können diese Bibliothek sicher im Knoten benötigen und absolut nichts passieren . Ein Dummy -Objekt wird so exportiert, so dass die Forderung der Bibliothek keinen Fehler macht. Hls.js ist in node.js. Weitere Informationen finden Sie unter #1841.
Schauen Sie zunächst das Repository an und installieren Sie die erforderlichen Abhängigkeiten
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-checkDer Dev Server hostet Dateien auf Port 8000. Nach dem Start befindet sich die Demo unter http: // localhost: 8000/Demo/.
Bevor Sie eine PR einreichen, finden Sie in unseren Beitragsrichtlinien. Schließen Sie sich der Diskussion über Slack über Video-dev.org in #HLSJS an, um Updates und Fragen zur Entwicklung zu erhalten.
Bauen Sie alle Geschmacksrichtungen (geeignet für Prod-Mode/CI):
npm install ci
npm run build
Nur Debug-Mode-Artefakte:
npm run build:debug
Erstellen und Uhr (Customized Dev Setups, in denen Sie über einen anderen Server hosten möchten - zum Beispiel in einem Untermodul/Projekt)
npm run build:watch
Nur spezifischer Geschmack (bekannte Konfigurationen sind: Debug, Dist, Light, Light Dist, Demo):
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
Hinweis: Die "Demo" -Konfiguration ist immer erstellt.
HINWEIS: hls.light.*.js Darüber hinaus sind die folgenden Typen im Lichtbau nicht verfügbar:
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerLinter ausführen:
npm run lint
Führen Sie einen Verstürfer mit automatischem Fix-Modus aus:
npm run lint:fix
Führen Sie nur mit Fehlern ein (keine Warnungen),
npm run lint:quiet
Führen Sie hübscher aus, um Code zu formatieren
npm run prettier
Führen Sie den Typ-Check aus, um die Typskriptypen zu überprüfen
npm run type-check
Führen Sie alle Tests gleichzeitig aus:
npm test
Rennen Sie Unit -Tests:
npm run test:unit
Führen Sie Unit -Tests im Uhrenmodus aus:
npm run test:unit:watch
Funktionale (Integrations-) Tests ausführen:
npm run test:func
Ein Überblick über das Design dieses Projekts, Module, Ereignisse und Fehlerbehelde finden Sie hier.
Beachten Sie, dass Sie auf die Dokumente für eine bestimmte Version "https://github.com/video-dev/hls.js/tree/deployments" zugreifen können.
https://hlsjs.video-dev.org/demo
https://hlsjs-dev.video-dev.org/demo
Suchen Sie sich unter https://github.com/video-dev/hls.js/tree/deployments.
HLS.JS ist nur mit Browsern kompatibel, die MediaSource Extensions (MSE) -API mit "Video/MP4" -Mime-Eingängen unterstützen.
HLS.js wird unterstützt:
Bei Browsern fehlt ein Versprechen -Polyfill.
Bitte beachten Sie:
Safari-Browser (iOS, iPados und macOS) haben eine integrierte HLS-Unterstützung durch die Quell-URL der einfachen Video-Tag "Tag". Siehe das Beispiel unten (mit HLS.js), um eine geeignete Funktionserkennung auszuführen und zwischen HLS.js oder nativ integrierter HLS-Unterstützung zu wählen.
Wenn eine Plattform weder MediaSource noch native HLS -Unterstützung hat, kann der Browser keine HLS spielen.
Denken Sie daran, dass die HLS-Streams, wenn es beabsichtigt, HLS auf mehreren Plattformen zu unterstützen, über diejenigen, die mit HLS.JS kompatibel sind, den Spezifikationen von RFC8216 strikt befolgen müssen, insbesondere wenn Apps, Smart-TVs und Set-Top-Boxen unterstützt werden sollen.
Hier finden Sie eine Unterstützungsmatrix der MediaSource-API hier: https://developer.mozilla.org/en-us/docs/web/api/Mediasource
Vorverpackte Builds sind in jeder Version enthalten. Oder installieren Sie die HLS.js als Abhängigkeit Ihres Projekts:
npm install --save hls.jsEin Kanarierkanal ist auch verfügbar, wenn Sie es vorziehen, den Entwicklungszweig (Master) auszuarbeiten:
npm install hls.js@canary
Geben Sie direkt Dist/hls.js oder dist/hls.min.js in ein Skript -Tag auf der Seite ein. Dieses Setup priorisiert die HLS.JS -MSE -Wiedergabe vor dem nativen Browser -Support für die HLS -Wiedergabe in 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 > Um zuerst nach einem nativen Browserunterstützung und dann nach HLS.js zu suchen, tauschen Sie diese Bedingungen aus. Sehen Sie diesen Kommentar, um einige der Kompromisse zu verstehen.
< 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 > Die HLS -Transkodierung einer Original -Videodatei verschiebt häufig die Zeit des ersten Frame ein wenig. Wenn Sie darauf angewiesen sind, dass eine genaue Übereinstimmung der Frame -Zeiten zwischen Originalvideo und HLS -Stream enthält, müssen Sie dazu berücksichtigen:
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 ;Weitere Einbetten- und API -Beispiele finden Sie unter Dokumenten/API.MD.
Alle HLS -Ressourcen müssen mit CORS -Headern geliefert werden, die Anfragen GET .
Das Video wird über HTML <video> Element HTMLVideoElement -Methoden, Ereignisse und optionale UI -Steuerelemente ( <video controls> ) gesteuert.
Die folgenden Spieler integrieren HLS.js für die HLS -Wiedergabe:
 | |||
| CDN77 | |||
Hergestellt von Gramk, spielt HLS von Adressleisten und M3U8 Links ab
HLS.JS wird unter Apache 2.0 -Lizenz veröffentlicht
