简单方法教你获取网页视频的m3u8链接(chrome为例)

如何获取网页视频的m3u8地址？
其实这个非常简单，以虎牙视频为例子说明一下。其实只需要用到浏览器的f12调试工具就好了，先按F12然后按下图所示步骤操作就可以找到了。第一步不是必须的，有的网页需要有的不需要。

获取网页视频的m3u8链接
其实不只是m3u8了，你可以根据自己的需求来过滤所加载的链接，比如你想获取所有jpg格式图片，你只需在过滤条件中（3）写入.jpg就好了，下面（4）的所有资源就都是.jpg格式的了。其余的大家自己发挥吧。

 

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

 

在线工具网页版——————https://www.fang1688.cn/download/3141.html

 

m3u8视频格式简介

m3u8视频格式原理：将完整的视频拆分成多个 .ts 视频碎片，.m3u8 文件详细记录每个视频片段的地址。

视频播放时，会先读取 .m3u8 文件，再逐个下载播放 .ts 视频片段。

常用于直播业务，也常用该方法规避视频窃取的风险。加大视频窃取难度。

鉴于 m3u8 以上特点，无法简单通过视频链接下载，需使用特定下载软件。

但软件下载过程繁琐，试错成本高。

使用软件的下载情况不稳定，常出现浏览器正常播放，但软件下载速度慢，甚至无法正常下载的情况。

软件被编译打包，无法了解内部运行机制，不清楚里面到底发生了什么。

基于以上原因，开发了本工具。

 

工具特点
无需安装，打开网页即可用。

强制下载现有片段，无需等待完整视频下载完成。

操作直观，精确到视频碎片的操作。

 

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

使用说明
打开视频目标网页，鼠标右键「检查」，或者「开发者工具」，或者按下键盘的「F12」键

找到 network，输入 m3u8，过滤 m3u8 文件。

刷新页面，监听 m3u8 文件。

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

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

拷贝这个 m3u8 文件的链接。

 

打开工具页面，输入链接，点击「解析下载」。

出现片段 Icon，则证明操作成功，耐心等待视频下载。

片段全部下载成功，将触发浏览器自动下载，下载整合后的完整视频。

如果有片段下载失败，则点击对应片段，或点击「重新下载错误片段」按钮。重新下载错误片段。

 

异常情况
【无法下载，没有显示片段Icon】

一般由于跨域造成。

点击「跨域复制代码」按钮。

打开视频目标网页的「开发者工具界面」，找到 console 栏。

跨域代码地址：https://zhuanlan.zhihu.com/p/528726549

 

粘贴刚刚复制的内容，回车。

滚动页面到底部，发现工具显示在底部。然后在注入的工具中正常使用

 

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

网站对视频源进行了加密操作。不同的视频网站有不同的算法操作。无法通用处理。

一般网站不会有这种情况。爱奇艺，腾讯等大视频网站才会有该安全措施。

 

实现思路
【下载并解析 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()。完成文件自动下载。

 

第三方接入

• 在 url 中通过 source 参数拼接下载地址即可，如：http://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.html?source=http://1257120875.vod2.myqcloud.com/0ef121cdvodtransgzp1257120875/3055695e5285890780828799271/v.f230.m3u8
• 系统将自动解析该参数

 

最终效果：