学习HLS.js

Source

前言

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

相关代码在资源