"
我是小白老师
今天给大家带来的是利用CSS技术实现百度好看视频下载
案例网站:好看视频
技术点:
1.video标签的controls属性
2.display:none
技术点分析
先来说说video标签的controls属性有什么作用吧?
1.video标签如果添加了controls属性,就会有控制条,而一般那些视频平台用的都是自己的播放器,所以一般不会添加这个属性
再来说说display:none有什么作用吧:
1.加了display:none样式的元素就会隐藏
技术点demo
我编写了一段html页面,里面有个video播放视频,没有加controls
image.png (37.51 KB, 下载次数: 0)
下载附件
2023-1-8 12:31 上传
看到没,没加controls就没有控制条
image.png (754.58 KB, 下载次数: 0)
下载附件
2023-1-8 12:32 上传
我们打开开发者工具,加上controls,看看有什么变化吧
image.png (448.86 KB, 下载次数: 0)
下载附件
2023-1-8 12:33 上传
image.png (676.18 KB, 下载次数: 0)
下载附件
2023-1-8 12:34 上传
我们再来看看display:none
image.png (289.43 KB, 下载次数: 0)
下载附件
2023-1-8 12:35 上传
加上display:none,元素就隐藏掉了
image.png (50.2 KB, 下载次数: 0)
下载附件
2023-1-8 12:35 上传
好了,讲完这两个技术点,就给大家实际操作百度好看视频的解除下载限制
实战操作前的设置
在讲解之前,首先需要设置一个东西(因为video的内部元素我们看不到,所以我们得让它可以看到)
1.在空白区域按下F12,打开开发者工具
image.png (594.4 KB, 下载次数: 0)
下载附件
2023-1-8 12:16 上传
2.点击右上角的小齿轮,也就是设置
image.png (108.92 KB, 下载次数: 0)
下载附件
2023-1-8 12:16 上传
3.找到偏好设置,找到元素,然后勾选显示用户代{过}{滤}理Shadow DOM
image.png (53.81 KB, 下载次数: 0)
下载附件
2023-1-8 12:17 上传
实战操作...
开始讲解0.打开百度好看视频网站1.打开开发者工具
image.png (477.16 KB, 下载次数: 0)
下载附件
2023-1-8 12:18 上传
2.利用左上角的箭头工具移动到视频区域,定位到video元素
image.png (369.61 KB, 下载次数: 0)
下载附件
2023-1-8 12:20 上传
3.给video添加controls属性,右键->以HTML格式修改
image.png (53.68 KB, 下载次数: 0)
下载附件
2023-1-8 12:21 上传
3.发现被百度好看的播放器遮挡,利用左上角的箭头工具,然后按下delete键删除元素
image.png (615.93 KB, 下载次数: 0)
下载附件
2023-1-8 12:22 上传
image.png (36.73 KB, 下载次数: 0)
下载附件
2023-1-8 12:24 上传
3.发现没有下载按钮
image.png (38.99 KB, 下载次数: 0)
下载附件
2023-1-8 12:25 上传
4.我们来的元素面板,ctrl+F5搜索下载,找到video元素里面的下载,发现是display:none,取消前面的勾勾
image.png (153.13 KB, 下载次数: 0)
下载附件
2023-1-8 12:27 上传
5.可以开始下载了
image.png (78.2 KB, 下载次数: 0)
下载附件
2023-1-8 12:27 上传
暴力猴自动化脚本
我还编写了一段暴力猴脚本 ,自动去除百度好看视频播放器控制条,自动显示下载按钮
吾爱总是插入url,我贴张图片
image.png (89.59 KB, 下载次数: 0)
下载附件
2023-1-8 12:38 上传
[JavaScript] 纯文本查看 复制代码// ==UserScript==
// @name 小白好看助手
// @namespace 下载好看视频的小助手
// @match https://haokan.baidu.com/v
// @grant none
// @version 1.0
// @AuThor -
// @description 2023/1/8 10:29:19
// ==/UserScript==
!(function(){
//去除百度好看视频播放器控制条
document.querySelector(".art-bottom").remove();
//获取所有的video元素,因为好看视频不止一个video元素
let videoArr = document.querySelectorAll("video")
//给video元素添加controls属性
for (let i = 0; i