m3u8-downloader：在线提取 m3u8 视频的轻量工具

m3u8-downloader：在线提取 m3u8 视频的轻量工具

m3u8 是一种常见的视频流媒体格式，广泛应用于直播和点播场景。它的原理是将完整视频拆分成多个 .ts 碎片，通过 .m3u8 索引文件记录每个片段的地址。播放时，播放器先读取索引文件，再逐个下载播放。

这种设计带来了安全优势，但也造成了一个问题：无法像普通视频那样直接通过链接下载。用户往往需要借助专门的下载软件，而这些软件操作繁琐、下载不稳定，且被编译打包后无法了解内部机制。

m3u8-downloader 正是为解决这些问题而生。

工具特点

无需安装：这是一个纯网页工具，打开浏览器即可使用，省去了软件安装和配置的麻烦。

强制下载：即使视频尚未完整下载，也可以将已获取的片段强制整合下载，让用户提前观看已下载的内容。

操作直观：工具精确展示每个 .ts 碎片的下载状态，灰色表示待下载，绿色表示成功，红色表示失败。点击失败片段即可重新下载。

使用方法

使用这款工具需要先获取 m3u8 文件链接。具体步骤如下：

打开目标视频网页，按 F12 调出开发者工具，切换到 Network 面板，在过滤框中输入 “m3u8”。刷新页面后，监听到的 m3u8 文件会出现在列表中。

需要注意区分索引文件和真正的视频 m3u8 文件。索引文件通常指向多个子 m3u8 文件，而包含大量 “ts” 字样的才是目标文件。复制该文件的链接，粘贴到工具页面，点击"解析下载"即可开始。

下载过程中，每个片段的进度一目了然。全部下载完成后，浏览器会自动触发整合后的视频文件下载。

跨域问题处理

部分视频资源存在跨域限制，导致工具无法直接访问。对此，工具提供了"跨域复制代码"功能。点击该按钮后，将复制的代码粘贴到视频页面的控制台执行，工具就会注入到当前页面中，绕过跨域限制。

这种设计让用户无需安装任何扩展，就能处理大多数跨域场景。

技术实现

整个工具的核心逻辑并不复杂，除 vue.js 外，所有代码都包含在一个 index.html 文件中，共计约 540 行。

下载与解析：通过 ajax 请求获取 m3u8 文件内容，解析其中的 ts 片段地址。下载 ts 片段时，需要将 responseType 设置为 arraybuffer，因为视频文件属于二进制数据。

队列下载：由于视频碎片数量众多，工具采用队列方式分批下载，同时限制并发数为 10，避免浏览器请求过多导致卡顿。

文件整合：使用 Blob 对象将多个 ts 文件整合成一个完整文件。关键点是在创建 Blob 时设置正确的 MIME 类型为 video/MP2T，否则浏览器会将其识别为文本文件。

自动下载：通过 URL.createObjectURL 生成 Blob 文件的内存链接，再利用 a 标签的 download 属性触发浏览器下载。

附加功能

工具内置了 AES 解密能力，借助 hls.js 的 aes-decryptor.js 模块，可处理加密的 m3u8 视频流。

MP4 转码功能基于 mux.js 实现，开发者还修复了原项目中无法计算视频长度的问题，并将修复后的版本开源。

对于需要频繁使用的场景，工具提供了油猴插件版本。安装后，可以在视频页面直接调用工具，支持"跳转下载"和"注入下载"两种模式。后者直接将代码注入当前页面，进一步简化跨域下载的流程。

工具还支持通过 URL 参数 source 拼接下载地址，方便第三方系统集成接入。

总结

m3u8-downloader 用不到 300 行 JavaScript 实现了一个实用的视频下载工具。它解决的核心问题是：在浏览器环境中，如何解析 m3u8 索引、下载 ts 碎片、整合并自动保存为完整视频文件。

整个方案没有依赖复杂的后端服务，纯前端实现，代码量精简，适合开发者阅读学习。对于有 m3u8 视频下载需求的用户，这是一个值得收藏的工具。

依赖复杂的后端服务，纯前端实现，代码量精简，适合开发者阅读学习。对于有 m3u8 视频下载需求的用户，这是一个值得收藏的工具。