有些视频只能在线看,没有下载入口?

最近坐火车较多,一路上又很漫长,本想着下载一些喜欢的剧看,奈何很多资源网站只能在线观看,没有提供下载入口。怎么办呢?程序员绝不认输!!

打开控制台看看线索

首先,看看 video 标签中的播放地址:

现在的视频在线播放都是blob:开头的,这个链接基本就没用了,如果你想强行打开,就会这样:

那我再看看具体的请求调用吧,毕竟,能在线播放,肯定有文件流被浏览器下载了吧,不会凭空播放:

这不找到了吗?那就好办了!!也许你没看懂,下面我画张图。

在线播放流程

流程分析

1. 在线播放时,不会直接加载视频的原始地址

视频原始地址通常会比较大,假如原始视频有 500M ,那岂不是浏览器要把 500M 的视频缓存下来,才能播放给你看?合理的播放方式是"边下边播"

2. 获取视频片段列表

视频插件会根据当前播放器进度条的位置,计算出应该加载哪个视频片段,从而实现"边下边播"。通常,这个接口中都会包含.m3u8。接口返回的内容,会是这样:

红色标记的部分,即视频片段链接。

有的是全链接,如同:https://xxx/xxx_0.ts?xxxxx

有的是相对地址,就像上图中这样。如果是相对地址,一般都是这样:

看明白了吗,就是把后面一段替换掉了

3. 根据进度条位置计算出应该加载的片段资源

以上三个步骤就是"边下边播"的原理,也是我们下载在线资源的必经之路

上代码

根据 m3u8 下载 .ts 文件

ini 复制代码
async function downloadByM3U8(m3u8Url, videoName) {
  // 截取出地址前缀
  // 从 https://xxxx/xxx/xxx/xxx.m3u8?xxx 中
  // 取 https://xxxx/xxx/xxx
  // 这里是取出最后一个 '/' 前面的一串,时间赶,写得挫
	let prefix = url.split(url.split('/')[url.split('/').length - 1])[0];

  // 如果没传 videoName 从 title 中获取视频名称
  const name = videoName || document.title;

  // 请求 m3u8 地址,通常这个地址返回的都不是 JSON ,而是文本,所以需要转一下
  const res = await fetch(m3u8Url);
  const m3u8Doc = await res.text();

  // 去掉文本中 '#' 开头的行,并放进任务数组中 
  const fList = m3u8Doc.split('\n').filter(str => !str.startsWith('#') && str);
  
  // 如果任务都是全路径,而不是相对路径,则不需要前缀
  if (fList[0].startsWith('http') || fList[0].startsWith('//')) prefix = '';

  // 根据任务数量,创建同样长度的 blob 数组
  const blobList = new Array(fList.length).fill('');

  // 依次请求任务
  // 这里可以用多 "通道" 同时跑会快一些,为了方便看逻辑,仅保留了核心代码
  for (let index = 0; index < (fList.length - 1); index++) {
    // 请求片段资源,按顺序放入 blob 数组中
    const res = await fetch(prefix + url);
    blobList[index] = await res.blob();
  }

  // 全部下载完以后,将 blob 数组组合起来,然后下载
  const blobs = new Blob(blobList, {
    type: "audio/wav"
  });

  const url = URL.createObjectURL(blobs);
  const link = document.createElement('a');
  link.href = url;
  link.download = name + '.ts';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

为什么下载的是.ts文件?因为本来视频片段就是.ts缓存文件,这种文件本身可以在电脑上播放,但无法在移动设备上播放,如果需要在移动设备播放,请看后文。

.ts 转 .mp4(附)

  1. 下载 ffmpeg:ffmpeg.org/download.ht...
  2. 配置环境变量:
  1. 进入下载文件夹,打开命令行(也可以直接打开命令行,但下面文件路径得变)
bash 复制代码
ffmpeg -i ./xxx.ts -c:v libx264 -preset slow -crf 22 -c:a copy ./xxx.mp4
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
优联前端10 小时前
DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方DeepSeek接入)
javascript·pycharm·ai编程·前端开发·优联前端·deepseek
萧大侠jdeps10 小时前
el-select 添加icon
前端·javascript·vue.js