基于以上原因,开发了本工具。
【解析下载】输入 m3u8 链接,点击下载视频。
【跨域复制代码】当资源出现跨域限制时,点击复制页面代码,在视频页面的控制台输入。将工具注入到视频页面中,解决跨域问题。
【重新下载错误片段】当部分视频片段下载失败时,点击该按钮,重新下载错误片段。
【强制下载现有片段】将已经下载好的视频片段强制整合下载。可以提前观看已经下载的片段。该操作不影响当前下载进程。
【片段Icon】对应每一个 .ts 视频片段的下载情况。「灰色」:待下载,「绿色」:下载成功,「红色」:下载失败。点击红色 Icon 可重新下载对应错误片段。
刷新页面,监听 m3u8 文件。
找到目标m3u8文件,查看文件内容,是否符合格式。
如下为索引文件,不是真正的视频 m3u8 文件
一般内容有许多 ts 字眼的文件才是我们需要的视频 m3u8 文件。
拷贝这个 m3u8 文件的链接。
如果有片段下载失败,则点击对应片段,或点击「重新下载错误片段」按钮。重新下载错误片段。
【无法下载,没有显示片段Icon】
打开视频目标网页的「开发者工具界面」,找到 console 栏。
滚动页面到底部,发现工具显示在底部。然后在注入的工具中正常使用。
【下载后的视频资源不可看】
一般网站不会有这种情况。爱奇艺,腾讯等大视频网站才会有该安全措施。
【下载并解析 m3u8 文件】
xhr.responseType = 'arraybuffer'
const fileBlob = new Blob(fileDataList, { type: 'video/MP2T' })
【自动下载】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 的常见知识,并不复杂。鼓励大家多尝试阅读源码,其实看源码并没有想象中的那么困难。
http://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.html?source=https://upyun.luckly-mjw.cn/Assets/media-source/example/media/index.m3u8
系统将自动解析该参数
手动添加油猴插件步骤