学习HLS.js

前言

HTTP 实时流（也称为HLS（.m3u8））是一种基于HTTP的自适应比特率流通信协议。HLS.js依靠HTML5视频和MediaSource Extensions进行播放，其特点：视频点播和直播播放列表、碎片化的 MP4 容器、加密媒体扩展 (EME) 支持 DRM（数字版权管理）、自适应流媒体、无需重新下载段即可在缓冲区和后台缓冲区中搜索。

HLS的配置对象

var config = {autoStartLoad: true,startPosition: -1,debug: false,capLevelOnFPSDrop: false,capLevelToPlayerSize: false,defaultAudioCodec: undefined,initialLiveManifestSize: 1,maxBufferLength: 30,maxMaxBufferLength: 600,backBufferLength: Infinity,frontBufferFlushThreshold: Infinity,maxBufferSize: 60 * 1000 * 1000,maxBufferHole: 0.1,highBufferWatchdogPeriod: 2,nudgeOffset: 0.1,nudgeMaxRetry: 3,maxFragLookUpTolerance: 0.25,liveSyncDurationCount: 3,liveSyncOnStallIncrease: 1,liveMaxLatencyDurationCount: Infinity,liveDurationInfinity: false,preferManagedMediaSource: false,enableWorker: true,enableSoftwareAES: true,fragLoadPolicy: {default: {maxTimeToFirstByteMs: 9000,maxLoadTimeMs: 100000,timeoutRetry: {maxNumRetry: 2,retryDelayMs: 0,maxRetryDelayMs: 0,},errorRetry: {maxNumRetry: 5,retryDelayMs: 3000,maxRetryDelayMs: 15000,backoff: 'linear',},},},startLevel: undefined,audioPreference: {characteristics: 'public.accessibility.describes-video',},subtitlePreference: {lang: 'en-US',},startFragPrefetch: false,testBandwidth: true,progressive: false,lowLatencyMode: true,fpsDroppedMonitoringPeriod: 5000,fpsDroppedMonitoringThreshold: 0.2,appendErrorMaxRetry: 3,loader: customLoader,fLoader: customFragmentLoader,pLoader: customPlaylistLoader,xhrSetup: XMLHttpRequestSetupCallback,fetchSetup: FetchSetupCallback,abrController: AbrController,bufferController: BufferController,capLevelController: CapLevelController,fpsController: FPSController,timelineController: TimelineController,enableDateRangeMetadataCues: true,enableMetadataCues: true,enableID3MetadataCues: true,enableWebVTT: true,enableIMSC1: true,enableCEA708Captions: true,stretchShortVideoTrack: false,maxAudioFramesDrift: 1,forceKeyFrameOnDiscontinuity: true,abrEwmaFastLive: 3.0,abrEwmaSlowLive: 9.0,abrEwmaFastVoD: 3.0,abrEwmaSlowVoD: 9.0,abrEwmaDefaultEstimate: 500000,abrEwmaDefaultEstimateMax: 5000000,abrBandWidthFactor: 0.95,abrBandWidthUpFactor: 0.7,abrMaxWithRealBitrate: false,maxStarvationDelay: 4,maxLoadingDelay: 4,minAutoBitrate: 0,emeEnabled: false,licenseXhrSetup: undefined,drmSystems: {},drmSystemOptions: {},requestMediaKeySystemAccessFunc: requestMediaKeySystemAccess,cmcd: {sessionId: uuid(),contentId: hash(contentURL),useHeaders: false,},
};var hls = new Hls(config);

autoStartLoad	是否在实例化后自动开始加载流
startPosition	播放的起始位置（以秒为单位）
debug	是否启用调试模式
capLevelOnFPSDrop	是否在帧率下降时降低视频质量
capLevelToPlayerSize	是否根据播放器大小调整视频质量
maxBufferLength	缓冲区的最大长度（以秒为单位）
maxMaxBufferLength	缓冲区的最大长度上限（以秒为单位）
backBufferLength	缓冲区的后缓冲长度（以秒为单位）
frontBufferFlushThreshold	前缓冲区的刷新阈值（以秒为单位）
maxBufferSize	缓冲区的最大大小（以字节为单位）
maxBufferHole	缓冲区中允许的最大空洞（以秒为单位）
fragLoadPolicy	定义片段加载策略，包括最大等待时间和重试策略
startLevel	初始加载的视频质量级别
lowLatencyMode	是否启用低延迟模式
enableWorker	是否使用 Web Worker 来处理流数据
enableSoftwareAES	是否启用软件 AES 解密
loader	自定义加载器函数
fLoader	自定义片段加载器函数
pLoader	自定义播放列表加载器函数
xhrSetup	自定义 XMLHttpRequest 设置回调函数
fetchSetup	自定义 Fetch 设置回调函数
abrController	自定义码率控制器
abrEwmaFastLive	直播时的快速 Ewma（指数加权移动平均）系数
abrEwmaSlowLive	直播时的慢速 Ewma 系数
abrEwmaFastVoD	点播时的快速 Ewma 系数
abrEwmaSlowVoD	点播时的慢速 Ewma 系数
abrEwmaDefaultEstimate	默认的 Ewma 估计值
abrBandWidthFactor	码率选择时的带宽因子
abrBandWidthUpFactor	码率选择时的上行带宽因子
enableDateRangeMetadataCues	是否启用日期范围元数据提示
enableMetadataCues	是否启用元数据提示
enableID3MetadataCues	是否启用 ID3 元数据提示
enableWebVTT	是否启用 WebVTT 字幕
enableIMSC1	是否启用 IMSC1 字幕
enableCEA708Captions	是否启用 CEA-708 字幕
stretchShortVideoTrack	是否拉伸短视频轨道
maxAudioFramesDrift	允许的最大音频帧漂移
forceKeyFrameOnDiscontinuity	是否在不连续时强制关键帧
fpsDroppedMonitoringPeriod	帧率下降监控周期（以毫秒为单位）
fpsDroppedMonitoringThreshold	帧率下降监控阈值
appendErrorMaxRetry	追加错误的最大重试次数
emeEnabled	是否启用 EME（加密媒体扩展）
licenseXhrSetup	自定义许可证请求设置回调函数
drmSystems	DRM 系统配置
drmSystemOptions	DRM 系统选项
requestMediaKeySystemAccessFunc	请求媒体密钥系统访问的函数
cmcd	CMCD（Common Media Client Data）配置

demo效果

相关代码在资源