"
我是小白老师
今天给大家带来的是利用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
