文章目录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 常见知识鼓励大家多尝试阅读源码。
