hls.js
v1.5.18
HLS.JS เป็นไลบรารี JavaScript ที่ใช้ไคลเอนต์การสตรีมสด HTTP มันขึ้นอยู่กับส่วนขยายวิดีโอ HTML5 และ MediaSource สำหรับการเล่น
มันทำงานได้โดยการส่งสตรีมการขนส่ง MPEG-2 และสตรีม AAC/MP3 ลงในชิ้นส่วน ISO BMFF (MP4) การส่งผ่านจะดำเนินการแบบอะซิงโครนัสโดยใช้ผู้ปฏิบัติงานบนเว็บเมื่อมีอยู่ในเบราว์เซอร์ HLS.JS ยังรองรับ HLS + FMP4 ตามที่ประกาศในระหว่าง WWDC2016
HLS.JS ทำงานโดยตรงบนองค์ประกอบ HTML <video> มาตรฐาน
HLS.JS เขียนใน ECMASCRIPT6 ( *.js ) และ typeScript ( *.ts ) (พิมพ์ superset อย่างมากของ ES6) และ transpiled ใน ecmascript5 โดยใช้ Babel และคอมไพเลอร์ TypeScript
Rollup ใช้เพื่อสร้างชุด Distro และให้บริการสภาพแวดล้อมการพัฒนาในท้องถิ่น
สำหรับรายละเอียดเกี่ยวกับรูปแบบ 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 Segments)#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> การนำเข้าและทดแทนตัวแปร ( NAME,VALUE,IMPORT,QUERYPARAM )#EXT-X-GAP (ข้ามเซ็กเมนต์และชิ้นส่วนช่องว่างการโหลดข้ามการเล่นของโปรแกรมที่ไม่ได้รับการยกเว้นที่มีเนื้อหาช่องว่างเท่านั้นและไม่มีทางเลือกที่เหมาะสมดู #2940)การแยกวิเคราะห์ แต่ขาดคุณสมบัติการสนับสนุน:
#EXT-X-PRELOAD-HINT:<attribute-list> (ดู #5074)สำหรับรายการปัญหาที่สมบูรณ์ให้ดูที่ "ลำดับความสำคัญสูงสุด" ในแท็บการวางแผนการวางจำหน่ายและแถบ backlog การสนับสนุน Codec ขึ้นอยู่กับสภาพแวดล้อมรันไทม์ (ตัวอย่างเช่นเบราว์เซอร์ทั้งหมดในการสนับสนุนระบบปฏิบัติการระบบปฏิบัติการเดียวกัน)
#EXT-XI-FRAME-STREAM-INF -frame playlist playlistREQ-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-checkเซิร์ฟเวอร์ dev จะโฮสต์ไฟล์บนพอร์ต 8000 เมื่อเริ่มต้นการสาธิตสามารถพบได้ที่ http: // localhost: 8000/demo/
ก่อนที่จะส่ง PR โปรดดูแนวทางการบริจาคของเรา เข้าร่วมการสนทนาเกี่ยวกับ Slack ผ่าน video-dev.org ใน #HLSJS สำหรับการอัปเดตและคำถามเกี่ยวกับการพัฒนา
สร้างรสชาติทั้งหมด (เหมาะสำหรับ prod-mode/ci):
npm install ci
npm run build
เฉพาะสิ่งประดิษฐ์โหมดดีบัก:
npm run build:debug
Build and Watch (การตั้งค่า dev ที่กำหนดเองซึ่งคุณจะต้องโฮสต์ผ่านเซิร์ฟเวอร์อื่น - ตัวอย่างเช่นในโมดูล/โครงการย่อย)
npm run build:watch
มีเพียงรสชาติที่เฉพาะเจาะจงเท่านั้น
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
หมายเหตุ: การกำหนดค่า "สาธิต" ถูกสร้างขึ้นเสมอ
หมายเหตุ: hls.light.*.js DIST ไม่รวมถึงทางเลือกอื่น, คำบรรยาย, CMCD, EME (DRM) หรือการสนับสนุนการทดแทนตัวแปร นอกจากนี้ประเภทต่อไปนี้ไม่สามารถใช้งานได้ใน Light Build:
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerเรียกใช้ linter:
npm run lint
เรียกใช้ Linter ด้วยโหมด Auto-Fix:
npm run lint:fix
เรียกใช้ linter ด้วยข้อผิดพลาดเท่านั้น (ไม่มีคำเตือน)
npm run lint:quiet
เรียกใช้รหัสฟอร์แมตที่สวยงามกว่า
npm run prettier
เรียกใช้การตรวจสอบประเภทเพื่อตรวจสอบประเภท typescript
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 เข้ากันได้เฉพาะกับเบราว์เซอร์ที่สนับสนุน MediaSource Extensions (MSE) API ที่มีอินพุต MIME VIDEAL/MP4 '
HLS.JS ได้รับการสนับสนุนใน:
จำเป็นต้องมีคำสัญญา polyfill ในเบราว์เซอร์ที่ขาดการสนับสนุนสัญญาดั้งเดิม
โปรดทราบ:
เบราว์เซอร์ Safari (iOS, iPados และ MacOS) มีการรองรับ HLS ในตัวผ่าน URL "TAG" Source "วิดีโอ" ดูตัวอย่างด้านล่าง (โดยใช้ 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ช่องท้องมีให้บริการหากคุณต้องการทำงานนอกสาขาการพัฒนา (อาจารย์):
npm install hls.js@canary
รวม DIST/HLS.JS หรือ DIST/HLS.MIN.JS โดยตรงในแท็กสคริปต์ในหน้า การตั้งค่านี้จัดลำดับความสำคัญของการเล่น HLS.JS MSE ผ่านการสนับสนุนเบราว์เซอร์พื้นเมืองสำหรับการเล่น HLS ใน 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 > ในการตรวจสอบการสนับสนุนเบราว์เซอร์พื้นเมืองก่อนแล้วกลับไปที่ 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 ดูเอกสาร/api.md
ทรัพยากร HLS ทั้งหมดจะต้องส่งมอบส่วนหัวของ CORS ที่อนุญาตให้ GET คำขอ
วิดีโอถูกควบคุมผ่าน HTML <video> องค์ประกอบ HTMLVideoElement วิธีการกิจกรรมและการควบคุม UI ที่เป็นตัวเลือก ( <video controls> )
ผู้เล่นต่อไปนี้รวม HLS.JS สำหรับการเล่น HLS:
 | |||
| cdn77 | |||
ผลิตโดย Gramk เล่น HLS จากที่อยู่แถบและลิงก์ M3U8
HLS.JS เปิดตัวภายใต้ใบอนุญาต Apache 2.0
