文章目录
- m3u8 视频在线提取，打开浏览器就能用
m3u8 视频在线提取，打开浏览器就能用
GitHub 上有一个 m3u8 视频下载工具，Star 数超过 7000。
m3u8 是一种常见的视频格式，原理是把完整视频拆成多个 .ts 碎片文件，再用一个 .m3u8 索引文件记录每个碎片的地址。播放时，播放器先读取 .m3u8 文件，再逐个下载 .ts 碎片进行播放。这种格式广泛用于直播场景，也被很多视频网站用来防止视频被盗取。
因为 m3u8 不是一个可以直接下载的视频文件，想保存这类视频，通常需要借助专门的下载软件。但软件下载流程繁琐，试错成本也高，有时候浏览器里播放得好好的，软件却下载不动，甚至完全没反应。再加上软件本身被编译打包，用户无法了解内部运行机制，出了问题也不知道怎么回事。
这个工具就是为了解决这些问题而开发的。
它是一个纯网页工具，打开浏览器就能直接使用，不需要安装任何东西。
使用流程是这样的：先打开视频所在的网页，按 F12 打开开发者工具，在 Network 面板里搜索 m3u8，然后刷新页面，就能捕获到 m3u8 文件的请求地址。把这个地址复制下来，粘贴到工具页面里，点击解析下载就行了。
工具会自动解析 m3u8 文件，获取所有 .ts 碎片的地址，然后逐个下载。每个碎片的下载状态都有颜色标识：灰色是待下载，绿色是下载成功，红色是下载失败。如果有碎片下载失败，可以点击对应碎片重新下载，也可以点重新下载错误片段按钮一键重试。
遇到跨域限制的情况，工具也提供了解决方案。点击跨域复制代码按钮，把生成的代码粘贴到视频网页的控制台里执行，工具就会被注入到当前页面中，绕过跨域限制正常下载。
下载完成后，工具会自动把所有 .ts 碎片整合成一个完整文件，触发浏览器下载。整个过程不需要等所有碎片都下完，已经下载好的碎片可以随时强制整合下载，不影响当前的下载进程。
技术实现上，核心逻辑并不复杂。解析 m3u8 文件用的是普通的 ajax 请求，读取返回的字符串进行解析。下载 .ts 碎片时，需要把 responseType 设置为 arraybuffer，因为视频文件是二进制数据。由于浏览器有同源并发限制，工具设置了 10 个并发下载，用队列的方式分批请求。
碎片整合用的是 Blob 对象，把所有 .ts 文件数据传入 new Blob()，设置好 MIME 类型为 video/MP2T，就能得到一个完整的视频文件。再通过 URL.createObjectURL 获取 Blob 的内存链接，用 a 标签的 download 属性触发自动下载。核心代码加起来只有几十行，其余都是 JS 的基础应用。
除了基本的下载功能，工具还支持 AES 常规解密，这部分代码来自 hls.js 项目。也支持 MP4 转码，基于 mux.js 实现，作者还修复了原项目中无法计算视频长度的问题。
对于不想每次都打开网页的用户，工具还提供了油猴插件版本。安装后，在任意视频页面点击插件图标，可以选择跳转下载或注入下载。跳转下载会新开页面并自动携带目标地址，注入下载则直接把代码注入到当前页面，适合有跨域限制的场景。
工具还支持第三方接入，在 URL 中通过 source 参数拼接下载地址，系统会自动解析并开始下载。整个工具除了 vue.js 文件，其余代码都包含在一个 index.html 文件里，总共 540 行，其中 CSS 190 行，HTML 30 行，JS 逻辑 300 行。作者在 README 里也提到，这些代码用到的都是 JS 常见知识，鼓励大家多尝试阅读源码。
提到，这些代码用到的都是 JS 常见知识，鼓励大家多尝试阅读源码。
