m3u8-downloader：在浏览器里直接下载 m3u8 视频

m3u8-downloader：在浏览器里直接下载 m3u8 视频

m3u8-downloader 在 GitHub 上拿到了约 7K Star。

一个纯前端网页，打开就能用。粘贴 m3u8 链接，逐个下载 .ts 视频碎片，自动合并成一个完整视频，触发浏览器下载。全程不需要安装任何软件。

1、这项目是干什么的

一句话：在浏览器里下载 m3u8 视频。

m3u8 是一种把完整视频切分成几百个 .ts 碎片、用一个索引文件记录所有碎片地址的格式。直播常用，也用来防止视频被直接下载。

这个工具就是一个网页。Chrome 打开，输入 m3u8 地址，点"解析下载"。每个 .ts 碎片的下载状态一目了然：灰色待下载，绿色已完成，红色下载失败。点击红色图标可以单独重试失败的那一片。全部下载完成后，浏览器自动下载合并后的视频文件。

遇到跨域限制时，点"跨域复制代码"，把代码粘贴到视频页面的控制台执行，工具就注入到视频页面里了，绕过跨域问题。

2、为什么要做这个工具

作者给出了三个理由。

第一，下载 m3u8 视频没法直接复制链接。你得找专门的下载软件，试用、卸载、再换一个，试错成本不低。

第二，能用软件不等于能顺利下载。一些工具在浏览器正常播放的视频面前，下载速度很慢，甚至完全下不动。

第三，第三方软件是编译打包好的，你不知道里面运行了什么逻辑。一个处理网络请求的可执行文件，源码不可见，对不少开发者来说是个隐性风险。

所以这个工具的设计目标很明确：无需安装，打开网页即可；操作过程可观测；全部源码在一个文件里，随便看。

3、有哪些功能

核心功能：

• 解析下载：粘贴 m3u8 链接，自动解析并下载所有 .ts 碎片，合并输出完整视频。
• 跨域下载：复制代码粘贴到目标页面的 console，工具注入到视频页面内部执行。
• 片段级别重试：下载失败的 .ts 碎片单独标记为红色，点击即重试那一片，不用从头来。
• 强制下载现有片段：即使还没全部下完，也可以先把已完成的部分合并导出，提前预览。
• AES 解密：借助 hls.js 的解密模块，处理加密的 m3u8 视频。
• MP4 转码：通过 mux.js 将 ts 片段转封装为 MP4，作者还修复了 mux.js 计算视频长度的 bug。
• 油猴插件：Tampermonkey 用户脚本提供两种模式，"跳转下载"新开工具页面并自动填入地址，"注入下载"直接把下载逻辑注入当前视频网站。
• 第三方接入：支持 URL 参数传递 m3u8 地址，方便其他页面直接跳转并自动解析。

4、怎么实现的

整个工具的核心代码都放在一个 index.html 里，共 540 行：CSS 190 行，HTML 30 行，JS 逻辑 300 行。

下载流程分四步：

第一步，用 AJAX 发 GET 请求获取 .m3u8 文件内容，解析出所有 .ts 碎片地址。

第二步，队列下载。碎片数量多，不能一次性全请求，采用队列分批下载。并发数设为 10，避免浏览器同源并发限制。

第三步，每个请求设置 xhr.responseType = 'arraybuffer'，因为下载的是二进制视频数据。

第四步，合并和下载。用 new Blob(fileDataList, { type: 'video/MP2T' }) 将所有碎片合并成一个 Blob，然后通过 URL.createObjectURL() 生成临时链接，挂到 <a> 标签上，设置 download 属性，调用 click() 触发浏览器下载。

核心代码不到 20 行。作者在 README 里说得很直白："涉及新知识点的部分只有上面一小段，其他的都是 JS 的基础应用。"

5、适合什么场景

• 保存在线课程、会议录像等 m3u8 格式的视频到本地。
• 调试视频播放问题，需要对单个 .ts 碎片的下载情况做精确追踪。
• 不想为了下载一个视频安装、学习使用一款桌面软件。
• 前端开发者学习文件下载、Blob API、AJAX 二进制数据处理，源码足够短，十分钟能读完。