学习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效果
