如何下载链接为blob类型的视频,video 标签 src:blob 链接转下载MP4

server/2024/11/24 20:08:03/

文章目录

  • 前言
    • 这种链接是如何生成的?
    • 原理分析
  • 第一步,找到源地址
    • 1.在想下载的视频网页,按f12打开开发人员工具。找到video标签,锁定src属性
    • 2.确认src源为blob:样式,转到网络(network),在筛选中输入.m3u8,得到实际地址
  • 第二步,借助blob下载网站下载文件
    • 1.用专门下载blob的[blob下载工具](https://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.html),粘贴上述`.m3u8`地址
    • 2.下载成功的内容为.ts文件
  • 第三步,使用ffmpeg工具 将格式转化为MP4
    • 1.ffmpeg下载与安装可以看一下我之前发布的文章
    • 2.打开cmd,输入ffmpeg,出现如下图所示即成功。
    • 3.ffmpeg 命令如下

在下载m3u8视频上,全文共参考两篇文章,并加以总结追加自己的内容
文章一:video 标签 src:blob 链接转下载MP4
文章二:如何下载链接为blob类型的视频

前言

网站使用这种格式就是为了增加我们的下载难度。

这种链接是如何生成的?

var img = "https://baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
fetch(img)
.then(resp=>{console.log(resp)var arr = new Uint16Array(resp);var blobOBj = new Blob([arr], {type: "application/octet-binary"});console.log(blobOBj);var blobUrl = URL.createObjectURL(blobOBj);console.log(blobUrl);
});

这段代码需要在 百度首页 的开发者工具控制台中运行,不然有跨域问题。
服务器默认返回的是字节数组类型,将其转换成Blob类型,根据它创建一个blob类型的链接。

原理分析

最早是数据库直接用Blob来存储二进制数据对象,这样就不用关注存储数据的格式了。在web领域,Blob对象表示一个只读原始数据的类文件对象,虽然是二进制原始数据但是类似文件的对象,因此可以像操作文件对象一样操作Blob对象。

video标签,audio标签还是img标签的src属性,不管是相对路径,绝对路径,或者一个网络地址,归根结底都是指向一个文件资源的地址。既然我们知道了Blob其实是一个可以当作文件用的二进制数据,那么只要我们可以生成一个指向Blob的地址,是不是就可以用在这些标签的src属性上,答案肯定是可以的,这里我们要用到的就是URL.createObjectURL()。

const objectURL = URL.createObjectURL(object); //blob:http://localhost:1234/abcedfgh-1234-1234-1234-abcdefghijkl

这里的object参数是用于创建URL的File对象、Blob 对象或者 MediaSource 对象,生成的链接就是以blob:开头的一段地址,表示指向的是一个二进制数据。
其中localhost:1234是当前网页的主机名称和端口号,也就是location.host,而且这个Blob URL是可以直接访问的。需要注意的是,即使是同样的二进制数据,每调用一次URL.createObjectURL方法,就会得到一个不一样的Blob URL。这个URL的存在时间,等同于网页的存在时间,一旦网页刷新或卸载,这个Blob URL就失效。

第一步,找到源地址

1.在想下载的视频网页,按f12打开开发人员工具。找到video标签,锁定src属性

在这里插入图片描述

2.确认src源为blob:样式,转到网络(network),在筛选中输入.m3u8,得到实际地址

在这里插入图片描述

第二步,借助blob下载网站下载文件

1.用专门下载blob的blob下载工具,粘贴上述.m3u8地址

在这里插入图片描述

可以直接点击MP4下载,下载下来就是视频了。

这里主要讲第二种方法,点击原格式下载
在这里插入图片描述

绿色的就是下载无异常的,红色的就是下载有问题的
在这里插入图片描述

2.下载成功的内容为.ts文件

在这里插入图片描述

第三步,使用ffmpeg工具 将格式转化为MP4

1.ffmpeg下载与安装可以看一下我之前发布的文章

vue2 中web端播放rtsp视频流 通过ffmpeg(海康威视录像机)

仅完成第一、第二步骤就行了了

2.打开cmd,输入ffmpeg,出现如下图所示即成功。

在这里插入图片描述

3.ffmpeg 命令如下

直接转
ffmpeg -i new.ts -c copy -map 0:v -map 0:a output.mp4
指定音频流(一般用这个)
ffmpeg -i new.ts -c copy -map 0:v -map 0:a -bsf:a aac_adtstoasc output.mp4重编码视频
ffmpeg -y -i new.ts -c:v libx264 -c:a copy -bsf:a aac_adtstoasc output.mp4

在这里插入图片描述

在这里插入图片描述

下班~


http://www.ppmy.cn/server/144629.html

相关文章

深度学习:神经网络中的损失函数的使用

深度学习:神经网络中的损失函数的使用 损失函数是监督学习中的关键组成部分,用于衡量模型预测值与真实值之间的差异。优化算法(如梯度下降)通过最小化损失函数来调整模型参数,以提高模型的预测精度。以下是几种常用的…

微深节能 平板小车运动监测与控制系统 格雷母线

微深节能的平板小车运动监测与控制系统中的格雷母线,是一种高精度、非接触式的位移测量系统,在平板小车的运动监测与控制中发挥着核心作用。 一、系统组成 该系统主要由以下关键部件组成: 地面电气柜:包含地址jie码器等重要组件&a…

Vue3与Vue2 对比

作者:东方小月 链接:https://juejin.cn/post/7111129583713255461 来源:稀土掘金 采用选项式,组合式,setup语法糖三种方式对比 首先实现一个同样的逻辑(点击切换页面数据)看一下它们直接的区别 更多前端,python知识请移…

手写一个深拷贝工具

背景 在面向对象编程中,对象之间的复制是一个常见的需求。对象的复制通常分为浅拷贝(Shallow Copy)和深拷贝(Deep Copy)两种方式。浅拷贝只复制对象的基本数据类型和引用类型的数据地址,而深拷贝则会递归地…

React Native的`react-native-reanimated`库中的`useAnimatedStyle`钩子来创建一个动画样式

React Native的react-native-reanimated库中的useAnimatedStyle钩子来创建一个动画样式,用于一个滑动视图的每个项目(SliderItem)。useAnimatedStyle钩子允许你根据动画值(在这个例子中是scrollX)来动态地设置组件的样…

react和vue图片懒加载及实现原理

一、实现原理 核心思想: 只有当图片出现在视口中时,才加载图片。利用占位图或占位背景优化用户体验。 实现技术: 监听滚动事件:监听页面滚动,通过计算图片与视口的位置关系,判断是否需要加载图片。Intersec…

Scala学习记录,Array

数组:物理空间上连续的(一个挨一个)优势:根据下标能快速找到元素。 列表:物理空间上不连续(不是一个元素挨着一个元素的)优势:插入元素,删除较快。 Array定义&#xff…

大数据面试题每日练习--HDFS是如何工作的?

HDFS(Hadoop Distributed File System)是一个分布式文件系统,设计用于存储非常大的文件。它的主要工作原理如下: NameNode:管理文件系统的命名空间,维护文件目录树和文件元数据信息。NameNode记录每个文件…