hls.js
v1.5.18
HLS.JS adalah perpustakaan JavaScript yang mengimplementasikan klien streaming langsung HTTP. Ini bergantung pada video HTML5 dan ekstensi MediaSource untuk pemutaran.
Ini bekerja dengan memindahkan aliran transport MPEG-2 dan aliran AAC/MP3 ke dalam fragmen ISO BMFF (MP4). Transmuxing dilakukan secara tidak sinkron menggunakan pekerja web bila tersedia di browser. HLS.JS juga mendukung HLS + FMP4, seperti yang diumumkan selama WWDC2016.
HLS.JS bekerja langsung di atas elemen HTML <video> standar.
Hls.js ditulis dalam ecmascript6 ( *.js ) dan naskah ( *.ts ) (superset yang diketik dengan kuat dari ES6), dan ditranspilasi dalam ecmascript5 menggunakan babel dan kompiler naskah.
Rollup digunakan untuk membangun bundel distro dan melayani lingkungan pengembangan lokal.
Untuk detail tentang format HLS dan makna tag ini, lihat 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> Pemilihan sistem kunci EME dan preloading#EXT-X-START:TIME-OFFSET=<n>#EXT-X-CONTENT-STEERING:<attribute-list> kemudi konten#EXT-X-DEFINE:<attribute-list> Substitusi variabel ( NAME,VALUE,QUERYPARAM ) #EXTM3U (diabaikan)#EXT-X-INDEPENDENT-SEGMENTS (diabaikan)#EXT-X-VERSION=<n> (nilai diabaikan)#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 hanya mendukung dengan segmen 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> metadata#EXT-X-DEFINE:<attribute-list> Impor dan substitusi variabel ( NAME,VALUE,IMPORT,QUERYPARAM )#EXT-X-GAP (melompati segmen dan bagian celah pemuatan. Lewati pemutaran program Unbuffered yang hanya berisi konten celah dan tidak ada alternatif yang cocok. Lihat #2940)Dukungan fitur yang diuraikan tetapi hilang:
#EXT-X-PRELOAD-HINT:<attribute-list> (lihat #5074)Untuk daftar masalah lengkap, lihat "Prioritas Tertinggi" di tab Proyek Perencanaan Rilis dan Backlog. Dukungan codec tergantung pada lingkungan runtime (misalnya, tidak semua browser pada HEVC dukungan OS yang sama).
#EXT-XI-FRAME-STREAM-INF -frame media playlist fileREQ-VIDEO-LAYOUT tidak digunakan dalam pemfilteran atau seleksi varianSAMPLE-AES Kunci dengan FMP4, AAC, MP3, VTT ... Segmen (hanya MPEG-2 TS)require dari runtime node.jsAnda dapat dengan aman meminta perpustakaan ini di Node dan sama sekali tidak akan terjadi . Objek dummy diekspor sehingga membutuhkan perpustakaan tidak melakukan kesalahan. Hls.js tidak dapat diselesaikan di node.js. Lihat #1841 untuk lebih jelasnya.
Pertama, periksa repositori dan instal dependensi yang diperlukan
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 akan meng -host file di port 8000. Setelah dimulai, demo dapat ditemukan berjalan di http: // localhost: 8000/demo/.
Sebelum mengirimkan PR, silakan lihat pedoman kontribusi kami. Bergabunglah dengan diskusi di Slack melalui video-dev.org di #HLSJS untuk pembaruan dan pertanyaan tentang pengembangan.
Bangun semua rasa (cocok untuk mode produk/ci):
npm install ci
npm run build
Hanya artefak mode debug:
npm run build:debug
Bangun dan Tonton (Pengaturan Dev yang Disesuaikan tempat Anda ingin meng -host melalui server lain - misalnya dalam sub -modul/proyek)
npm run build:watch
Hanya rasa spesifik (konfigurasi yang diketahui adalah: Debug, Dist, Light, Light-Dist, Demo):
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
Catatan: Konfigurasi "demo" selalu dibangun.
Catatan: hls.light.*.js tidak termasuk alternatif-audio, subtitle, CMCD, EME (DRM), atau dukungan substitusi variabel. Selain itu, tipe berikut tidak tersedia dalam bangunan ringan:
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerJalankan linter:
npm run lint
Jalankan linter dengan mode perbaikan otomatis:
npm run lint:fix
Jalankan linter dengan kesalahan saja (tidak ada peringatan)
npm run lint:quiet
Jalankan lebih cantik untuk memformat kode
npm run prettier
Jalankan tipe-cek untuk memverifikasi tipe naskah
npm run type-check
Jalankan semua tes sekaligus:
npm test
Jalankan Tes Unit:
npm run test:unit
Jalankan tes unit dalam mode arloji:
npm run test:unit:watch
Jalankan tes fungsional (integrasi):
npm run test:func
Gambaran umum desain proyek ini, modul, acara, dan penanganan kesalahan dapat ditemukan di sini.
Catatan Anda dapat mengakses dokumen untuk versi tertentu menggunakan "https://github.com/video-dev/hls.js/tree/deployments"
https://hlsjs.video-dev.org/demo
https://hlsjs-dev.video-dev.org/demo
Temukan komit di https://github.com/video-dev/hls.js/tree/deployments.
HLS.JS hanya kompatibel dengan browser yang mendukung MediaSource Extensions (MSE) API dengan input tipe mime 'video/MP4'.
HLS.JS didukung pada:
Polyfill janji diperlukan di browser yang kehilangan dukungan janji asli.
Harap dicatat:
Browser Safari (iOS, iPados, dan MacOS) memiliki dukungan HLS bawaan melalui URL sumber "Tag" Sumber Plain Video. Lihat contoh di bawah ini (menggunakan HLS.JS) untuk menjalankan deteksi fitur yang sesuai dan memilih antara menggunakan HLS.JS atau dukungan HLS bawaan secara asli.
Ketika sebuah platform tidak memiliki dukungan MediaSource atau HLS asli, browser tidak dapat memainkan HLS.
Perlu diingat bahwa jika niatnya adalah untuk mendukung HLS pada beberapa platform, di luar yang kompatibel dengan HLS.JS, aliran HLS perlu secara ketat mengikuti spesifikasi RFC8216, terutama jika aplikasi, TV pintar, dan set-top box harus didukung.
Temukan matriks pendukung API MediaSource di sini: https://developer.mozilla.org/en-us/docs/web/api/mediasource
Build yang dikemas disertakan dengan setiap rilis. Atau instal HLS.JS sebagai ketergantungan proyek Anda:
npm install --save hls.jsSaluran Canary juga tersedia jika Anda lebih suka mengerjakan Cabang Pengembangan (Master):
npm install hls.js@canary
Langsung menyertakan dist/hls.js atau dist/hls.min.js dalam tag skrip pada halaman. Pengaturan ini memprioritaskan pemutaran HLS.JS MSE daripada dukungan browser asli untuk pemutaran HLS di 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 > Untuk memeriksa dukungan browser asli terlebih dahulu dan kemudian mundur ke HLS.JS, bertukar kondisional ini. Lihat komentar ini untuk memahami beberapa pengorbanan.
< 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 > Transkode HLS dari file video asli sering mendorong waktu bingkai pertama sedikit. Jika Anda bergantung pada pencocokan waktu bingkai yang tepat antara video asli dan aliran HLS, Anda perlu memperhitungkan ini:
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 ;Untuk lebih banyak contoh embed dan API lihat Docs/API.MD.
Semua sumber daya HLS harus dikirimkan dengan header CORS yang mengizinkan permintaan GET .
Video dikendalikan melalui metode HTML <video> elemen HTMLVideoElement , peristiwa dan kontrol UI opsional ( <video controls> ).
Para pemain berikut mengintegrasikan HLS.JS untuk pemutaran HLS:
 | |||
| CDN77 | |||
Dibuat oleh Gramk, Mainkan HLS dari Bar Alamat dan Tautan M3U8
HLS.JS dirilis di bawah lisensi Apache 2.0
