有些视频只能在线看，没有下载入口？

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

打开控制台看看线索

首先，看看 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（附）

下载 ffmpeg：ffmpeg.org/download.ht...
配置环境变量：

进入下载文件夹，打开命令行（也可以直接打开命令行，但下面文件路径得变）

bash 复制代码

ffmpeg -i ./xxx.ts -c:v libx264 -preset slow -crf 22 -c:a copy ./xxx.mp4