音视频前端【免费下载链接】hls.jsHLS.js is a JavaScript library that plays HLS in browsers with support for MSE.项目地址https://gitcode.com/gh_mirrors/hl/hls.js点击查看免费下载HLS.js 是一个用 JavaScript 实现的 HTTP Live StreamingHLS客户端库它直接运行在标准 HTMLvideo元素之上通过 MediaSource ExtensionsMSE在浏览器中完成 HLS 流媒体的拉流、解密、转封装与播放。本文以 hls.js 仓库的 README.md 为主线结合源码级证据系统讲解它的工作原理、支持的 HLS 标签与编解码格式、安装嵌入方式、核心 API、浏览器兼容性、构建体系与开发流程帮助读者掌握用 HLS.js 在 Web 端播放 VOD / 直播 / 低延迟 HLS 的完整实战方案。HLS.js 是什么工作原理与核心管道HLS.js 是一个实现 HTTP Live Streaming 客户端的 JavaScript 库其播放链路依赖 HTML5 video 元素与 MediaSource ExtensionsMSE两大 Web 标准。它做的事情可以概括为将 MPEG-2 Transport Stream 以及 AAC/MP3 裸流**转封装Transmux**为 ISO BMFF即 MP4 分片再通过 MSE 的SourceBuffer追加进媒体元素进行播放。关键在于 Transmux转封装——它只改变容器格式不解码也不重新编码视频帧因此开销远小于 Transcode。从源码看转封装由多种 demuxer remuxer 组合完成见 src/demux/transmuxer.ts 中的MuxConfigtype MuxConfig | { demux: typeof MP4Demuxer; remux: typeof PassThroughRemuxer } // fMP4 直通 | { demux: typeof TSDemuxer; remux: typeof MP4Remuxer } // MPEG-2 TS | { demux: typeof AC3Demuxer; remux: typeof MP4Remuxer } // AC-3full 构建 | { demux: typeof AACDemuxer; remux: typeof MP4Remuxer } // ADTS AAC | { demux: typeof MP3Demuxer; remux: typeof MP4Remuxer }; // MPEG 音频对应关系清晰可查MP4 分片走MP4Demuxer PassThroughRemuxer直接透传TS 容器H.264/H.265/ADTS AAC/MP3/AC-3/ID3 元数据由 src/demux/tsdemuxer.ts 解复用后再由 src/remux/mp4-remuxer.ts 重封装为 fMP4。转封装默认异步执行在 Web Worker 中浏览器支持时。src/demux/transmuxer-worker.ts 在 Worker 内实例化Transmuxer主线程与 Worker 之间通过postMessage交换transmuxComplete/flush等消息并使用 Transferable 对象转移ArrayBuffer以降低消息传递开销。这一设计避免了高码率分片解析阻塞 UI 主线程。此外HLS.js 也支持 HLS fMP4HLS 标准中直接携带 fMP4 分片的形式这使其能够承载 HEVC、AV1、VP9、Dolby Vision 等现代视频编码取决于运行环境是否支持。功能特性矩阵HLS.js 的功能覆盖了 HLS 生态的绝大部分需求以下为 README 中声明的完整特性清单VOD 与 Live 播放列表Live 播放列表的 DVR时移回看支持低延迟 HLSLow-Latency HLSPartial Segments部分分片、Blocking Playlist Reload阻塞式播放列表重载、Playlist Delta UpdatesDelta 更新与 Rendition ReportsFragmented MP4 容器视频HEVC、AV1、VP9、Dolby Vision受运行时支持限制音频AC-3、EC-3、FLAC、Opus、ALAC受运行时支持限制支持SUPPLEMENTAL-CODECS属性参与编码选择MPEG-2 TS 容器H.264ITU-T H.264 / ISO/IEC 14496-10与 H.265ITU-T H.265 / ISO/IEC 23008-2仅 full 构建基本流ADTS AAC 基本流ISO/IEC 13818-7MPEG-1/2 Audio Layer IIIMP3基本流ISO/IEC 11172-3 / 13818-3AC-3 / Dolby Digital 基本流仅 full 构建分组化元数据 ID3v2.3.0 基本流AAC 容器纯音频流与MPEG Audio 容器MP3 纯音频流定时元数据ID3承载于 MPEG-2 TS、EmsgCMAF/fMP4、以及播放列表中的DATERANGE标签MPEG-2 TS 中的 MISB KLV 元数据可通过enableEmsgKLVMetadata选装开启加密与 DRMAES-128、AES-256、AES-256-CTR 全分片解密identity 格式 SAMPLE-AES 解密仅限 MPEG-2 TS 分片EMEEncrypted Media ExtensionsDRM 支持fMP4 分片配合 FairPlay、PlayReady、Widevine CDM码率/清晰度控制基于 HTMLMediaElement 分辨率、丢帧率与 HDCP-Level 的 Level 封顶capping字幕与隐藏字幕CEA-608/708 隐藏字幕、WebVTT 字幕、IMSC1TTML字幕限于 text profile 与 TTML 样式子集自适应码流ABR手动与自动画质切换提供 3 种切换模式通过 API 控制Instant switching在当前播放位置立即切换画质Smooth switching为下一个已加载分片切换画质Bandwidth conservative switching为下一个已加载分片切换画质且不清空缓冲自动画质模式下带宽骤降时可紧急降级emergency switch down以最小化缓冲多音轨支持多变体播放列表中带备选音频的 Alternate Audio Track RenditionVOD 与 LiveHLS Interstitials使用DATERANGE标签编排的广告插入与内容替换I-frame 快进播放包括图像 I-framemjpgrendition精确 SeekVOD 与 Live 均可精确到非分片/非关键帧边界缓冲区内 Seek无需重新下载分片即可在缓冲与回看缓冲区内定位内置分析能力所有内部事件可被监控网络事件、视频事件暴露播放会话指标支持 Common Media Client DataCMCDContent Steering内容转向错误韧性库内建重试机制可触发恢复动作以修复 fatal 媒体或网络错误冗余/故障切换播放列表Redundant/Failover PlaylistsHLS 变量替换Variable Substitution这些功能在源码中均有对应实现例如 ABR 由 src/controller/abr-controller.ts 驱动、缓冲管理在 src/controller/buffer-controller.ts、DRM 在 src/controller/eme-controller.ts、广告插播在 src/controller/interstitials-controller.ts。所有控制器在 src/hls.ts 的构造函数中被按顺序装配成networkControllers与coreComponents并通过事件总线基于EventEmitter见 src/events.ts协作。支持的 HLS 标签清单HLS.js 的 M3U8 解析器位于 src/loader/m3u8-parser.ts。以下标签被完整支持标签语义细节参考 HLS 规范 RFC 8216 bis 草案Multivariant Playlist多变体播放列表标签#EXT-X-STREAM-INF:attribute-listURI#EXT-X-I-FRAME-STREAM-INFI-frame 媒体播放列表#EXT-X-MEDIA:attribute-list#EXT-X-SESSION-DATA:attribute-list#EXT-X-SESSION-KEY:attribute-listEME Key-System 选择与预加载#EXT-X-START:TIME-OFFSETn#EXT-X-CONTENT-STEERING:attribute-list内容转向#EXT-X-DEFINE:attribute-list变量替换NAME,VALUE,QUERYPARAM属性Media Playlist媒体播放列表标签#EXTM3U格式必需标识#EXT-X-VERSION:n该值会被忽略#EXT-X-INDEPENDENT-SEGMENTS被忽略#EXT-X-I-FRAMES-ONLY#EXTINF:duration,[title]#EXT-X-ENDLIST#EXT-X-PLAYLIST-TYPE:type-enum见下方 Not Supported#EXT-X-MEDIA-SEQUENCE:n#EXT-X-TARGETDURATION:n#EXT-X-DISCONTINUITY#EXT-X-DISCONTINUITY-SEQUENCE:n#EXT-X-BITRATE:rate#EXT-X-BYTERANGE:n[o]#EXT-X-MAP:attribute-list#EXT-X-KEY:attribute-listKEYFORMATidentity,METHODSAMPLE-AES仅支持 MPEG-2 TS 分片#EXT-X-PROGRAM-DATE-TIME:date-time-msec#EXT-X-START:TIME-OFFSETn#EXT-X-SERVER-CONTROL:attribute-list#EXT-X-PART-INF:PART-TARGETn#EXT-X-PART:attribute-list#EXT-X-SKIP:attribute-listDelta 播放列表#EXT-X-RENDITION-REPORT:attribute-list#EXT-X-DATERANGE:attribute-list元数据包含 HLS EXT-X-DATERANGE 广告插播 Schema#EXT-X-DEFINE:attribute-list变量导入与替换NAME,VALUE,IMPORT,QUERYPARAM属性#EXT-X-GAP跳过加载 GAP 分片与 part当无合适备用节目时跳过仅含 GAP 内容的未缓冲节目已解析但功能缺失#EXT-X-PRELOAD-HINT:attribute-list解析器会识别该标签但对应的预加载功能尚未实现。不支持的能力与边界以下为 README 明确列出的不支持项接入前请先对照排查#EXT-X-PLAYLIST-TYPE不用于根据 Expires 响应头决定媒体播放列表是否重载变体过滤/选择中不使用REQ-VIDEO-LAYOUT属性identity 格式SAMPLE-AES密钥仅适用于 MPEG-2 TS 分片fmp4、aac、mp3、vtt 等分片不支持加密的 MPEG-2 TS 分片不支持 FairPlay Streaming、PlayReady、WidevineFairPlay Streaming 遗留密钥不支持com.apple.fps.1_0请使用 Safari 原生播放ClearKeyorg.w3.clearkey支持不完整key system 可被识别但无法向 EME 控制器提供 key ID/密钥值对因此不存在 license 或 session 路径EC-3Dolby Digital Plus不支持 MPEG-2 TS 与无容器纯音频基本流EC-3 仅在 fMP4 分片中受支持MPEG-2 TS 中的 HEVC 与 AC-3 被排除在light构建之外见构建常量__USE_M2TS_ADVANCED_CODECS__Server-Side RenderingSSR与 Node.js 运行时在 Node.js 中require该库是安全的——什么都不会发生。库会导出一个哑对象dummy object保证require不抛错但 HLS.js 在 Node.js 中不可实例化。这使 SSR 框架如 Next.js/Nuxt 的服务器端渲染可以安全地静态引入 hls.js。浏览器兼容性与运行时基线HLS.js只兼容支持 MSE API 且接受video/MP4MIME 类型输入的浏览器。官方支持矩阵Chrome 47桌面Firefox 51桌面Windows 10 的 EdgemacOS 10.11 的 Safari 10iPadOS 13 的 SafariiOS 17.1 的 Safari自 hls.js v1.5.0 起通过 Managed Media SourceMMS支持Chrome for Android 5Firefox for Android 5这些版本是构建 UMD bundle 时传给babel/preset-env的目标。UMD bundle 共享ES2016 运行时基线ES5 风格语法 原生 ES2016 全局对象Map、Set、Promise、Array.from、Uint8Array.from、Array.prototype.includes等。为控制包体积不打包任何core-jspolyfill。值得注意的基线差异CMCD 等可选功能会引入 ES2017 API如Object.entries因此 full UMD bundle 实际要求 ES2017 能力的运行时而lightbundle 不包含这些功能保持在 ES2016 基线。低于该基线的浏览器需要在使用 HLS.js 之前自行提供缺失全局对象的 polyfill。dist/的两种分发变体UMDdist/hls.js、dist/hls.min.js、dist/hls.light.js、dist/hls.light.min.js可直接通过script标签嵌入暴露全局Hls或经package.json的main字段由require(hls.js)解析。配套的dist/hls.worker.js是打包好的转封装 Web Worker。ESMdist/hls.mjs、dist/hls.light.mjs及压缩版dist/hls.min.mjs、dist/hls.light.min.mjsimport hls.js经module字段解析到未压缩的dist/hls.mjs适合交给打包器二次压缩.min.mjs用于通过script typemodule从 CDN 直接加载。ESM 以babel/preset-env的esmodules: true为目标约 Chrome 61、Firefox 60、Safari 10.1、Edge 16使用 ES2015 语法但低于 ES2019无Array.prototype.flatMap、Object.fromEntries等。重要差异ESM 构建不内联转封装 Web Worker。UMD 构建内联了 Worker但dist/hls.mjs与dist/hls.min.mjs没有因此若不指定workerPath转封装将运行在主线程。可按如下方式指定独立发布的 Workerconst hls new Hls({ workerPath: https://cdn.jsdelivr.net/npm/hls.js1/dist/hls.worker.js, });如果你直接从src/导入或在自己的构建中包含未转译的运行时依赖将绕过 Babel 管道、自行承担转译责任——这些源码模块可能使用到发布包中已被 tree-shaking 移除的 ES2019 API。另请注意SafariiOS、iPadOS、macOS本身支持通过 video 标签的普通srcURL 播放 HLS。若目标平台既无 MSE 也无原生 HLS 支持则该平台无法播放 HLS。若期望覆盖 HLS.js 兼容范围之外的多平台App、智能电视、机顶盒流媒体必须严格遵循 RFC 8216 规范。安装与嵌入三种接入方式安装npm install --save hls.js若希望跟踪开发分支master可安装 canary 频道npm install hls.jscanary方式一脚本标签直接嵌入优先 HLS.js MSE 播放直接在页面中引入dist/hls.js或dist/hls.min.js。该方案优先使用 HLS.js 的 MSE 播放而非浏览器原生 HLS 播放script srchttps://cdn.jsdelivr.net/npm/hls.js1/script !-- 或者使用主分支上的最新版本 -- !-- script srchttps://cdn.jsdelivr.net/npm/hls.jscanary/script -- video idvideo/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 无法运行在没有启用 Media Source Extensions (MSE) 的平台上。 // // 当浏览器内置 HLS 支持时用 canPlayType 检测 // 可以直接把 HLS manifest即 .m3u8 URL通过 src 属性交给 video 元素 // 这走的是普通 video 元素的内置能力不经过 HLS.js。 else if (video.canPlayType(application/vnd.apple.mpegurl)) { video.src videoSrc; } /script方式二先检测原生支持、再回退到 HLS.js交换两个条件分支即可实现原生优先、HLS.js 兜底注意video.canPlayType(application/vnd.apple.mpegurl)在 Safari、Chrome 等浏览器中会返回非空字符串maybe但并非所有浏览器对 HLS 内容的支持都可靠——例如 Chrome 147 报告支持却可能无法原生播放某些流。除非你确实需要原生播放否则推荐默认方案先Hls.isSupported()。script srchttps://cdn.jsdelivr.net/npm/hls.js1/script !-- 或者使用主分支上的最新版本 -- !-- script srchttps://cdn.jsdelivr.net/npm/hls.jscanary/script -- video idvideo/video script var video document.getElementById(video); var videoSrc https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8; // // 仅在浏览器具备 ManagedMediaSource如现代 Safari时才走原生 HLS // 因为那里的原生播放支持良好其他浏览器可能报告支持却无法可靠播放某些流。 // if ( video.canPlayType(application/vnd.apple.mpegurl) ManagedMediaSource in window ) { video.src videoSrc; // // 不走原生 HLS 时检查 HLS.js 是否受支持 // } 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); // 然后按偏移补偿例如 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。核心 API 与关键配置Hls 类能力检测与实例化核心类是Hls见 src/hls.ts其静态方法承担能力检测职责Hls.isSupported()检测 MSE 是否可用且isTypeSupported对任一基线编码通过。src/is-supported.ts 的实现显示它会对avc1.42E01E,mp4a.40.2、av01.0.01M.08、vp09.00.50.08视频组合以及mp4a.40.2、fLaC音频组合调用mediaSource.isTypeSupported。Hls.isMSESupported()仅检测 MSE API 本身是否存在且 SourceBuffer 原型上具备appendBuffer/remove方法。Hls.getMediaSource()返回用于 MSE 播放的全局对象ManagedMediaSource、MediaSource 或 WebKitMediaSource 之一。Hls.Events/Hls.ErrorTypes/Hls.ErrorDetails事件名与错误类型的命名空间供hls.on(...)订阅使用。实例的核心方法源码签名均可在 src/hls.ts 中查到API说明hls.loadSource(url)设置源 URL相对或绝对均可随后触发 manifest 加载hls.attachMedia(video)将 Hls.js 挂载到媒体元素换源时会自动 detach 并重新 attachhls.detachMedia()从媒体元素卸载hls.startLoad(position?)开始加载数据position默认 -1从最早点开始hls.stopLoad()停止加载hls.destroy()销毁实例并释放引用hls.recoverMediaError()媒体元素出错时一键 detach re-attach 并恢复hls.swapAudioCodec()交换可能的音频编码如立体声与 5.1 之间hls.on/once/off事件订阅事件对象见Hls.Events画质切换相关的属性对应 README 中3 种切换模式hls.currentLevel n立即切换会清空当前缓冲尽快替换画质播放会短暂中断以重新缓冲设为-1回到自动选择。对应 Instant switching。hls.nextLevel n为下一个已加载分片切换画质不中断播放可能中止当前加载并冲刷当前播放分片区域之外的缓冲。对应 Smooth switching。hls.loadLevel n以保守方式为下一个已加载数据切换画质不清空缓冲但会中断当前加载实际生效要等已有缓冲播完。对应 Bandwidth conservative switching。hls.nextLoadLevel为下一个分片设置画质完全非破坏性等待当前加载完成后再切换。另有用到的startLevel、firstLevel、autoLevelCapping、maxHdcpLevel、bandwidthEstimate等。这些 setter 在源码中都写入了levelController.manualLevel并配合streamController的immediateLevelSwitch()/nextLevelSwitch()工作实现上述三种语义差异。常用配置项与默认值Hls 实例的配置 用户传入的userConfig覆盖在Hls.DefaultConfig之上合并而成。Hls.DefaultConfig可以静态读写以修改所有后续实例的默认值。默认配置定义在 src/config.ts 的hlsDefaultConfig中以下为高频配置项及其默认值配置项默认值作用autoStartLoadtrue设置源后是否自动开始加载startPosition-1自动开始加载的起始位置debugfalse开启日志输出maxBufferLength30最大缓冲时长秒backBufferLengthInfinity保留在缓冲中的回看时长maxBufferSize60 * 1000 * 1000最大缓冲字节数60 MBmaxBufferHole0.1容忍的缓冲空洞秒maxFragLookUpTolerance0.25分片查找容差liveSyncDurationCount3直播同步的 target duration 倍数liveSyncDurationundefined直播同步点距 live edge 的秒数liveMaxLatencyDurationCountInfinity直播最大延迟按 target duration 计数liveSyncOnStallIncrease1直播失速增加时同步maxLiveSyncPlaybackRate1追赶直播用的最大播放速率lowLatencyModetrue低延迟 HLS 模式enableWorkertrue是否在 Web Worker 中执行转封装workerPathnull自定义 Worker 路径ESM 构建必需enableSoftwareAEStrue软件 AES 解密开关abrEwmaDefaultEstimate5e5ABR 默认带宽估计500 kbpsabrBandWidthFactor0.95ABR 带宽因子abrBandWidthUpFactor0.7ABR 升档带宽因子minAutoBitrate0自动模式下可选的最小码率capLevelToPlayerSizefalse是否按播放器尺寸封顶画质capLevelOnFPSDropfalse丢帧时是否封顶画质emeEnabledfalse是否启用 EME DRMdrmSystems{}DRM 系统配置licenseUrl 等cmcdundefinedCMCD 客户端数据配置enableDateRangeMetadataCuestrue是否生成 DATERANGE 元数据 cueenableEmsgMetadataCuestrue是否生成 Emsg 元数据 cueenableEmsgKLVMetadatafalse是否解析 TS 中 MISB KLV 元数据progressivefalse渐进式流媒体模式startLevelundefined起始画质等级-1 表示自动此外还有完整的加载策略体系certLoadPolicy、keyLoadPolicy、manifestLoadPolicy、playlistLoadPolicy、fragLoadPolicy、steeringManifestLoadPolicy等分别控制证书/密钥/主清单/媒体播放列表/分片/转向清单的maxTimeToFirstByteMs、maxLoadTimeMs、timeoutRetry与errorRetry参数默认值见 src/config.ts。例如分片加载fragLoadPolicy默认maxTimeToFirstByteMs: 10000、maxLoadTimeMs: 120000、超时重试最多 4 次、错误重试最多 6 次——这正是 README 所述库内建重试机制的落地之处。CORS 与视频控制所有 HLS 资源必须带有允许GET请求的 CORS 头。由于 HLS.js 通过fetch/XHR拉取 manifest、分片与密钥跨域资源缺少 CORS 头将直接导致加载失败。视频本身通过标准 HTMLvideo元素的HTMLVideoElement方法、事件与可选 UI 控件video controls进行控制——HLS.js 不接管播放控制只负责提供媒体数据。开发与构建体系起步git clone https://github.com/video-dev/hls.js.git cd hls.js # 克隆或拉取代码后确保依赖最新 npm install ci # 启动 demo 页开发服务器文件监听时重新编译但不写实际 dist 产物 npm run dev # 修改代码后运行 sanity-check验证提交前的全部检查 npm run sanity-check开发服务器监听 8000 端口启动后可访问http://localhost:8000/demo/查看 demo。提交 PR 前请阅读 CONTRIBUTING.md。构建任务构建所有 flavor适合生产/CInpm install ci npm run build仅构建 debug 产物npm run build:debug构建并监听适用于自定义开发环境例如在子模块/子项目中由其他服务器托管npm run build:watch只构建指定 flavor已知配置full、fullMin、fullEsm、fullEsmMin、light、lightMin、lightEsm、lightEsmMin、worker、demonpm run build -- --configType fullMin # 可重复 --configType 构建多个这些 flavor 由 rollup.config.js 读取build-config.js中的配置列表configType筛选后执行对应的 Rollup 构建。报告构建产物dist/文件大小并对照 dist-size-budget.json 中的预算检查CI 也运行同一检查npm run size npm run size:checklight 构建的裁剪范围hls.light.*.js不包含备选音轨alternate-audio、字幕、CMCD、EMEDRM、变量替换、Interstitials、I-frame trick-play、Media Capabilities以及 MPEG-2 TS 高级编码HEVC 与 AC-3。Content Steering 包含在内。此外 light 构建中下列类型不可用AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCMCDControllerInterstitialsControllerInterstitialsManagerIFrameControllerHlsIFramesOnlyHlsImageIFramesOnly代码质量与测试LinterESLintnpm run lint # 运行检查 npm run lint:fix # 自动修复 npm run lint:quiet # 仅报错忽略警告格式化Prettiernpm run prettier类型检查npm run type-check自动化测试Mocha/Karmanpm test # 运行全部测试 npm run test:unit # 单元测试Karma可在真实浏览器中运行 npm run test:unit:watch # 单元测试 watch 模式 npm run test:func # 功能集成测试单元测试覆盖位于 tests/unit功能测试位于 tests/functional。一次提交前的完整质量门禁为npm run sanity-check它依次执行 lint、prettier 校验、类型检查、构建、es-check、文档生成与单元测试。生态与集成已知集成 HLS.js 的播放器以下播放器集成了 HLS.js 用于 HLS 播放README 所列JW Player、Akamai Adaptive Media PlayerAMP、BridTV Player、Clappr、Flowplayer经 flowplayer-hlsjs、MediaElement.js、KalturaPlayer经 kaltura-player-js、Videojs经 videojs-hlsjs / videojs-hls.js / videojs-contrib-hls.js 等多个 SourceHandler 插件、Fluid Player、OpenPlayerJS、CDNBye基于 WebRTC Datachannel 的 hls.js P2P 引擎、M3U IPTV、ArtPlayer、IPTV Player。生产环境使用者README 中列出的生产环境使用者包括 adultswim、Akamai、Canal、Dailymotion、freshlive、mux、foxsports.com.au、globo、gunosy、NYTimes、peer5、qbrick、radiantmediaplayer、rts、snapstream、streamamg、streamshark、tablo、streamroot、ted、clevercast、Viacom、vk、jwplayer、kaltura、showmax、1tv、zdf、brid、cdn77、r7、p2p-media-loader、kayosports、flosports、axon、rutube、labra-flex、streamfizz 等。另外有 Chrome/Firefox 浏览器插件native-hls支持从地址栏直接播放 m3u8 链接。深入阅读设计与 API 文档架构设计总览docs/design.md 介绍了项目的模块划分、事件流与错误处理设计。API 与用法文档含代码示例docs/API.md其中覆盖了从支持检测 → 实例化 → 绑定视频元素 → 加载 manifest → 错误处理 → 销毁/切换流的完整五步流程以及capLevelToPlayerSize、maxBufferLength、liveSyncDuration等全部细粒度配置项、recoverMediaError()等 fatal 错误恢复方式的示例代码。类型定义构建产物中的dist/hls.d.ts提供了完整的 TypeScript 类型仓库内的 API 报告见 api-extractor/report/hls.js.api.md。许可HLS.js 以 Apache 2.0 协议发布详见 LICENSE。该协议允许自由使用、修改与分发含商用场景同时保留版权与许可声明要求。赞分享音视频前端【免费下载链接】hls.jsHLS.js is a JavaScript library that plays HLS in browsers with support for MSE.项目地址https://gitcode.com/gh_mirrors/hl/hls.js点击查看免费下载相关推荐HLS.js实战指南从零构建浏览器直播播放器HLS.js实战指南从零构建浏览器直播播放器 HLS.js是一款强大的JavaScript库能够在支持MSE媒体源扩展的浏览器中播放HLSHTTP直播音视频前端在 Next.js 中集成 HLS.js 实现跨浏览器 HLS 视频播放在 Next.js 中集成 HLS.js 实现跨浏览器 HLS 视频播放 导读 本指南围绕 Next.js 官方示例仓库中的 examples/with hls前端后端Web框架SSR前端构建突破浏览器限制HLS.js与MSE打造无缝流媒体播放体验突破浏览器限制HLS.js与MSE打造无缝流媒体播放体验 你是否遇到过网页视频加载缓慢、频繁缓冲或画质忽高忽低的问题作为运营或开发人员如何在各种浏览器中提音视频前端上一篇突破Kafka-Docker性能瓶颈3大核心优化策略让消息吞吐提升300%下一篇AssetRipper 实战指南从 Unity 游戏资源提取到导出可复用项目创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考