m3u8 视频在线提取工具

工具在线地址，推荐使用 chrome 浏览器。

研发背景

• m3u8视频格式简介

  • m3u8视频格式原理：将完整的视频拆分红多个 .ts 视频碎片，.m3u8 文件详细记录每一个视频片断的地址。
  • 视频播放时，会先读取 .m3u8 文件，再逐个下载播放 .ts 视频片断。
  • 经常使用于直播业务，也经常使用该方法规避视频窃取的风险。加大视频窃取难度。

• 鉴于 m3u8 以上特色，没法简单经过视频连接下载，需使用特定下载软件。

  • 但软件下载过程繁琐，试错成本高。
  • 使用软件的下载状况不稳定，常出现浏览器正常播放，但软件下载速度慢，甚至没法正常下载的状况。
  • 软件被编译打包，没法了解内部运行机制，不清楚里面到底发生了什么。
• 基于以上缘由，开发了本工具。

  

工具特色

• 无需安装，打开网页便可用。
• 强制下载现有片断，无需等待完整视频下载完成。
• 操做直观，精确到视频碎片的操做。

功能说明

【解析下载】输入 m3u8 连接，点击下载视频。
【跨域复制代码】当资源出现跨域限制时，点击复制页面代码，在视频页面的控制台输入。将工具注入到视频页面中，解决跨域问题。
【从新下载错误片断】当部分视频片断下载失败时，点击该按钮，从新下载错误片断。
【强制下载现有片断】将已经下载好的视频片断强制整合下载。能够提早观看已经下载的片断。该操做不影响当前下载进程。
【片断Icon】对应每个 .ts 视频片断的下载状况。「灰色」：待下载，「绿色」：下载成功，「红色」：下载失败。点击红色 Icon 可从新下载对应错误片断。

使用说明

• 打开视频目标网页，鼠标右键「检查」，或者「开发者工具」，或者按下键盘的「F12」键
• 找到 network，输入 m3u8，过滤 m3u8 文件。
• 刷新页面，监听 m3u8 文件。

  

• 找到目标m3u8文件，查看文件内容，是否符合格式。

  • 以下为索引文件，不是真正的视频 m3u8 文件

    

  • 通常内容有许多 ts 字眼的文件才是咱们须要的视频 m3u8 文件。

    

• 拷贝这个 m3u8 文件的连接。

  

• 打开工具页面，输入连接，点击「解析下载」。
• 出现片断 Icon，则证实操做成功，耐心等待视频下载。
• 片断所有下载成功，将触发浏览器自动下载，下载整合后的完整视频。
• 若是有片断下载失败，则点击对应片断，或点击「从新下载错误片断」按钮。从新下载错误片断。

  

异常状况

【没法下载，没有显示片断Icon】

• 通常因为跨域形成。
• 点击「跨域复制代码」按钮。
• 打开视频目标网页的「开发者工具界面」，找到 console 栏。

  

• 粘贴刚刚复制的内容，回车。
• 滚动页面到底部，发现工具显示在底部。而后在注入的工具中正常使用。

  

【下载后的视频资源不可看】

• 网站对视频源进行了加密操做。不一样的视频网站有不一样的算法操做。没法通用处理。
• 通常网站不会有这种状况。爱奇艺，腾讯等大视频网站才会有该安全措施。

  

实现思路

【下载并解析 m3u8 文件】

• 直接经过 ajax 的 get 请求 m3u8 文件。获得 m3u8 文件的内容字符串。读取字符串进行解析。
• 须要注意的是，m3u8 文件不是 json 格式，不能将 dataType 设置为 json。

【队列下载 ts 视频片断】

• 一样使用 ajax 的 get 请求视频碎片，一个 ajax 请求一个 ts 视频碎片，但关键点在于，下载的是视频文件，属于二进制数据，须要将 responseType 请求头设置为 arraybuffer。xhr.responseType = 'arraybuffer'
• 使用队列下载，是由于视频碎片太多，不可能一次性请求所有。须要分批下载。
• 同时因为浏览器同源并发限制，视频同时请求数不能过多。本工具设置为并发下载数为 10。

【组合 ts 视频片断】

• 看似很难，但其实使用 Blob 对象便可将多个 ts 文件整合成一个文件。new Blob()，传入 ts 文件数组。
• 这里有个小细节须要注意，须要在 new Blob 的第二个参数中设置文件的 MIME 类型，不然将默认为 txt 文件。 const fileBlob = new Blob(fileDataList, { type: 'video/MP2T' })

【自动下载】

• 下载，固然先要得到文件连接，即刚生成的 Blob 文件连接。
• 使用 URL.createObjectURL，便可获得浏览器内存中，Blob 的文件连接。URL.createObjectURL(fileBlob)
• 最后，使用 a 标签的 a.download 属性，将 a 标签设置为下载功能。主动调用 click 事件a.click()。完成文件自动下载。

  

核心代码

【整合及自动下载】

// 下载整合后的TS文件
    downloadFile(fileDataList, fileName, fileType) {
      this.tips = 'ts 碎片整合中，请留意浏览器下载'
      const fileBlob = new Blob(fileDataList, { type: 'video/MP2T' }) // 建立一个Blob对象，并设置文件的 MIME 类型
      const a = document.createElement('a')
      a.download = fileName + '.' + fileType
      a.href = URL.createObjectURL(fileBlob)
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },

是的，涉及新知识点的部分只有上面一小段，其余的都是 JS 的基础应用。

除了 vue.js 文件，本工具代码均包含在 index.html 文件里面。包括换行，一共 540 行代码，其中 css 样式 190 行，html 标签 30 行。JS 逻辑代码 300 行。

罗列这些代码量只是想代表，本工具运用到的都只是 JS 的常见知识，并不复杂。鼓励你们多尝试阅读源码，其实看源码并无想象中的那么困难。

源码连接

完结撒花，感谢阅读。