"
我是你们的老朋友小白老师
案例网站:六间房
技术点:filter:blur(5px)
我先来介绍一下六间房的情况，就是没有登录的时候，会变得很模糊，看不清直播间内容
image.png (224.57 KB, 下载次数: 0)
下载附件
2023-1-4 14:58 上传
这样的模糊是如何实现的呢?
大家如果学过前端那就知道是filter:blur(5px)，这个可以让图片和视频模糊，数值越大越模糊
我们来看看我自己弄的一个网页，就一个视频播放，然后弄了一个父元素，在其父元素上面加了一个filter，看到没，视频变模糊了
image.png (47.73 KB, 下载次数: 0)
下载附件
2023-1-4 15:01 上传
image.png (183 KB, 下载次数: 0)
下载附件
2023-1-4 15:01 上传
当我们去掉这个样式，模糊就变清晰了
image.png (379.42 KB, 下载次数: 0)
下载附件
2023-1-4 15:02 上传
那六间房我猜测用的就是这个技术，为了定位这个filter，我写了一个js脚本，放到控制台
image.png (47.95 KB, 下载次数: 0)
下载附件
2023-1-4 15:03 上传
[JavaScript] 纯文本查看 复制代码//获取video标签元素
let videoObj = document.querySelector("video")
let ele = videoObj
//寻找父节点,一旦父节点是document
//就直接就是undefined，就是false，暂停while循环
while(ele.parentNode){
//获取节点的CSS中的filter
let filter = getComputedStyle(ele).filter;
//判断该节点CSS是否有filter
if(filter !== "none") {
console.log(ele,getComputedStyle(ele).filter);
}
ele = ele.parentNode
}
好了定位到了，然后删除属性，ok，已经画质变清晰了，愉快的观看直播间了
image.png (356.4 KB, 下载次数: 0)
下载附件
2023-1-4 15:04 上传
来到元素，然后Ctrl+F5，然后搜寻 player-float 属性名，然后删除属性名
image.png (463.3 KB, 下载次数: 0)
下载附件
2023-1-4 15:05 上传
至于还有一个登录解锁高清直播，再利用左上角的箭头，移动上去，定位到这个然后按下delete键删除即可
image.png (423.5 KB, 下载次数: 0)
下载附件
2023-1-4 15:07 上传
这个主播我替大家打码了，2333哈哈哈哈
image.png (312.73 KB, 下载次数: 0)
下载附件
2023-1-4 15:08 上传
