hls.js
v1.5.18
HLS.JS는 HTTP 라이브 스트리밍 클라이언트를 구현하는 JavaScript 라이브러리입니다. 재생을 위해 HTML5 비디오 및 MediaSource 확장 기능에 의존합니다.
MPEG-2 전송 스트림과 AAC/MP3 스트림을 ISO BMFF (MP4) 조각으로 변환하여 작동합니다. 브라우저에서 사용할 수있을 때 웹 워커를 사용하여 Transmuxing이 비동기로 수행됩니다. HLS.JS는 또한 WWDC2016에서 발표 된대로 HLS + FMP4도 지원합니다.
HLS.JS는 표준 HTML <video> 요소 위에 직접 작동합니다.
hls.js는 ecmascript6 ( *.js ) 및 typescript ( *.ts ) (ES6의 강하게 입력 된 슈퍼 세트)로 작성되었으며 Babel 및 TypeScript 컴파일러를 사용하여 ECMASCRIPT5로 변환됩니다.
롤업은 배포 번들을 구축하고 로컬 개발 환경에 서비스를 제공하는 데 사용됩니다.
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 세그먼트에서만 지원됩니다)#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> 델타 재생 목록#EXT-X-RENDITION-REPORT:<attribute-list>#EXT-X-DATERANGE:<attribute-list> 메타 데이터#EXT-X-DEFINE:<attribute-list> 변수 가져 오기 및 대체 ( NAME,VALUE,IMPORT,QUERYPARAM 속성)#EXT-X-GAP (갭 세그먼트 및 부품을로드하는 스키 핑. 갭 컨텐츠와 적절한 대체가 포함되지 않은 부패하지 않은 프로그램의 재생을 스킵 백. #2940 참조)구문 분석되었지만 누락 된 기능 지원 :
#EXT-X-PRELOAD-HINT:<attribute-list> ( #5074 참조)전체 문제 목록은 릴리스 계획 및 백 로그 프로젝트 탭의 "최우선 우선 순위"를 참조하십시오. Codec 지원은 런타임 환경에 따라 다릅니다 (예 : 동일한 OS 지원 HEVC의 모든 브라우저는 아닙니다).
#EXT-XI-FRAME-STREAM-INF i-frame 미디어 재생 목록 파일REQ-VIDEO-LAYOUT 변형 필터링 또는 선택에 사용되지 않습니다SAMPLE-AES 메소드 키 (MPEG-2 TS 만 해당)require노드 에이 라이브러리를 안전하게 요구할 수 있으며 아무 일도 일어나지 않을 것입니다 . 라이브러리를 요구하면 오류가 발생하지 않도록 더미 객체가 내보내십시오. 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-checkDev 서버는 포트 8000에서 파일을 호스팅합니다. 일단 시작되면 데모는 http : // localhost : 8000/demo/에서 실행되는 것을 찾을 수 있습니다.
PR을 제출하기 전에 기여 가이드 라인을 참조하십시오. 개발에 대한 업데이트 및 질문에 대해 #hlsjs의 video-dev.org를 통해 Slack에 대한 토론에 참여하십시오.
모든 맛을 구축하십시오 (Prod-Mode/CI에 적합) :
npm install ci
npm run build
디버그 모드 아티팩트 만 :
npm run build:debug
빌드 앤 워치 (다른 서버를 통해 호스팅하려는 사용자 정의 된 DEV 설정 - 예를 들어 하위 모듈/프로젝트에서)
npm run build:watch
특정 향미 만 (알려진 구성은 디버그, Dist, Light, Light-Dist, 데모입니다) :
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
참고 : "데모"구성은 항상 구축됩니다.
참고 : hls.light.*.js 또한 조명 빌드에서는 다음 유형을 사용할 수 없습니다.
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdController런 라이터 :
npm run lint
자동 고정 모드로 Linter를 실행하십시오.
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는 'Video/MP4'MIME 형 입력을 갖춘 MediaSource Extensions (MSE) API를 지원하는 브라우저와 호환됩니다.
hls.js는 다음에 지원됩니다.
기본 약속 지원이 누락 된 브라우저에는 약속 폴리 필이 필요합니다.
참고 :
Safari 브라우저 (iOS, iPados 및 MACOS)에는 일반 비디오 "태그"소스 URL을 통해 HLS 지원이 내장되어 있습니다. 아래 예제 (HLS.JS 사용)를 참조하여 적절한 기능 감지를 실행하고 HLS.JS 또는 기본적으로 내장 된 HLS 지원 중에서 선택하십시오.
플랫폼에 MediaSource 나 기본 HLS 지원이 없으면 브라우저는 HL을 재생할 수 없습니다.
HLS.JS와 호환되는 것 외에도 여러 플랫폼에서 HLS를 지원하려는 의도가 있다면 HLS 스트림은 RFC8216, 특히 앱, 스마트 TV 및 셋톱 박스를 지원하는 경우 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를 직접 포함시킵니다. 이 설정은 htmlmedialements에서 HLS 재생에 대한 기본 브라우저 지원보다 HLS.JS MSE 재생을 우선시합니다.
< 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 예제는 DOCS/API.MD를 참조하십시오.
모든 HLS 리소스는 GET 요청을 허용하는 CORS 헤더와 함께 제공되어야합니다.
비디오는 html <video> 요소 HTMLVideoElement 방법, 이벤트 및 선택적 UI 컨트롤 ( <video controls> )을 통해 제어됩니다.
다음 플레이어는 HLS.JS를 HLS 재생에 통합합니다.
 | |||
| cdn77 | |||
Gramk에서 만든 주소 표시 줄 및 M3U8 링크에서 HL을 연주합니다.
HLS.JS는 Apache 2.0 라이센스에 따라 릴리스됩니다
