能播就能下
传统的视频下载插件一般通过分析视频网站的 JS 代码,掌握其播放链接相关信息从而实现视频下载。一旦视频网站更改相关接口和逻辑,插件就会失效。
我们知道,当视频在网页中播放时,其音视频数据理论上已经全部存在于我们的计算机中,并且唯一的播放出口就是 <video>
元素。因此,本项目着眼于 <video>
元素,尝试实现更加普适、更加本源的视频下载。
步骤一:注册 JS 代码
Ctrl+A
复制index.js
的全部内容。- 在网页中按下
F12
打开开发者工具,选择控制台(console)
- 将代码粘贴进控制台,按回车执行
成功标志:控制台显示 请设定 window.videoEl 并执行 main() 以使用
,且没有红色的报错信息。
步骤二:设定 window.videlEl
方法一:自动设定
- 在控制台输入
getMainVideoElement()
,按回车执行。
成功标志:控制台显示 以 <video
开头的一串内容,将鼠标放上去,左侧网页中对应的视频会遮上蓝色。如果这正是你要下载的视频,则步骤二完成,否则,你可能需要使用方法二。
方法二:手动设定
需要对浏览器开发者工具有一定的了解,在此不做详细说明
-
通过浏览器菜单的
检查
或在开发者工具的元素(element)
中选中想要下载的<video>
元素。 -
在控制台中执行
var videoEl = $0
成功标志同上。
步骤三:操作控制面板。
-
在控制台中执行
main()
,网页中会显示出一个控制面板,上面有三个按钮:从头播放
,开始录制
,结束录制
-
点击
从头播放
,视频将会从头开始播放,再点击开始录制
,视频播放的内容将被录制。 -
点击
结束录制
,录制的内容将会被下载为.webm
格式的文件。
- 录制完整视频内容(手动点击按钮会导致开头/结尾部分内容遗失)
- 更加简便的
<video>
元素选择机制。 - 借助 ffmpeg.wasm 在浏览器侧完成
.webm => .mp4
的转换。