发源地·开源项目分享社区

 找回密码
 立即注册
查看: 8141|回复: 0
收起左侧

2020年首发超强影视网站iframe广告过滤遮罩,拦截一切广告

[复制链接]

活雷锋

329

主题

1359

帖子

2667万

积分

管理员

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

UID
1
性别
银票
8889541
铜板
8892050
钢镚
8897155
好友
2
记录
1
日志
0
相册
54
帖子
1359
主题
329
精华
116
分享
0
注册时间
2019-5-13
最后登录
2021-1-3
在线时间
376 小时
卖家信用
买家信用
听众
1
收听
1
居住地
江苏省 苏州市 太仓市 太仓经济开发区
职业
山贼
自我介绍
他们都是叛徒,但我从没恨过他们...
兴趣爱好
IT/互联网/硬件/软件
发表于 2020-8-15 16:46:02 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
2020年首发超强影视网站iframe广告过滤遮罩,拦截一切广告,适用于所有影视网站的iframe盒子。
这是一个困扰了所有站长长达数年的难题,今天放在这里了。
=============
作者:G.flower
日期:2020-08-15
=============
效果截图:
QQ浏览器截图20200815163408.png QQ浏览器截图20200815163356.png
QQ浏览器截图20200815163423.png
QQ浏览器截图20200815163450.png
广告过滤演示网址:点我查看过滤遮罩效果
提前准备一个bofang.png图标,尺寸40x40,在播放器中请设置30x30,否则有少数大幅广告无法遮盖。
将以下代码添加到播放页面中,一般这种移动端的webAPP在PC端的解析线路是没有嵌入式广告的,所以针对的是移动设备的屏蔽,当然,以下预留了PC端的屏蔽样式位置,只需要按照如下操作来弄就行:
1.将以下包含的CSS样式
  1. @media screen and (max-width: 600px) { /*当屏幕小于600px时,应用下面的CSS样式*/
复制代码

复制到
  1. @media screen and (min-width: 600px) { /*当屏幕大于600px时,应用下面的CSS样式*/
复制代码
的下面。然后调整所有遮罩的top、left、width、height四个值。

CSS部分:
  1. <style>
  2. 广告屏蔽遮罩
  3. @media screen and (min-width: 600px) { /*当屏幕大于600px时,应用下面的CSS样式*/
  4. .chongzai{
  5.     display:none;//默认PC端隐藏
  6. }
  7. }
  8. @media screen and (max-width: 600px) { /*当屏幕小于600px时,应用下面的CSS样式*/
  9. .chongzai{
  10.     position: absolute;//忽略行高,使用固定坐标
  11.     background-color:#E6E6E6;
  12.     padding:10px 5px 10px 5px;
  13.     border-radius:0px;
  14.     z-index:2;
  15. }
  16. .chongzai1{
  17.     top:10%;
  18.     left:0px;
  19.     width:100%;
  20.     height:29%;
  21. }
  22. .chongzai2{
  23.     top:46.5%;
  24.     left:0px;
  25.     width:100%;
  26.     height:35%;
  27. }
  28. .chongzai3{
  29.     top:35%;
  30.     left:0px;
  31.     width:46.5%;
  32.     height:20%;
  33. }
  34. .chongzai4{
  35.     top:35%;
  36.     left:53%;
  37.     width:47%;
  38.     height:20%;
  39. }
  40. .chongzaia{
  41.     position: absolute;
  42.     padding:10px 5px 10px 5px;
  43.     border-radius:50px;
  44.     z-index:3;
  45.     text-align:center;
  46. }
  47. .chongzai5{
  48.     top:20%;
  49.     left:25%;
  50.     width:50%;   
  51.     height:11%;
  52.     color:green;
  53.     font-size:25px;   
  54. }
  55. .chongzai6{
  56.     top:55%;
  57.     left:11%;
  58.     width:78%;   
  59.     height:10%;
  60.     color:yellow;
  61.     font-size:16px;  
  62.     background-color:red;   
  63. }
  64. .chongzai7{
  65.     top:73.5%;
  66.     left:22%;   
  67.     width:55%;
  68.     height:5%;
  69.     color:yellow;
  70.     line-height:1px;
  71.     font-size:12px;  
  72.     background-color:red;
  73.     border-radius:50px;   
  74. }
  75. .jz{
  76.     position: absolute;
  77.     padding:10px 5px 10px 5px;
  78.     border-radius:50px;
  79.     text-align:center;
  80. }
  81. .jiazai{
  82.     top:37%;
  83.     left:25%;   
  84.     width:50%;
  85.     height:10%;
  86.     color:#AC58FA;
  87.     font-size:18px;  
  88.     background-color:#F6CEEC;
  89.     border-radius:5px;  
  90.     z-index:7;   
  91. }
  92. .jiazai2{
  93.     top:37%;
  94.     left:25%;   
  95.     width:50%;
  96.     height:10%;
  97.     color:#AC58FA;
  98.     font-size:18px;  
  99.     background-color:#F6CEEC;
  100.     border-radius:5px;  
  101.     z-index:6;   
  102. }
  103. .jiazai3{
  104.     top:37%;
  105.     left:25%;   
  106.     width:50%;
  107.     height:10%;
  108.     color:#AC58FA;
  109.     font-size:18px;  
  110.     background-color:#F6CEEC;
  111.     border-radius:5px;  
  112.     z-index:5;   
  113. }
  114. .jiazai4{
  115.     top:37%;
  116.     left:25%;   
  117.     width:50%;
  118.     height:10%;
  119.     color:#AC58FA;
  120.     font-size:18px;  
  121.     background-color:#F6CEEC;
  122.     border-radius:5px;  
  123.     z-index:4;   
  124. }
  125. .chuantou{
  126.     pointer-events: none;   //点击穿透,让播放按钮的点击事件穿透到播放器层
  127. }
  128. .bo1{
  129.     top:35%;
  130.     left:25%;   
  131.     width:50%;
  132.     height:10%;
  133.     color:#AC58FA;
  134.     font-size:18px;  
  135.     border-radius:5px;  
  136.     z-index:3;  
  137. }
  138. #hide{
  139.     display:none;
  140. }
  141. }
  142. </style>
复制代码
html部分:
  1. <!--广告遮罩-->        
  2.                 <a class="jz jiazai" id="jiazai1">加载中 [计时0.5秒]</a>
  3.                 <a class="jz jiazai2" id="jiazai2">加载中 [计时1.0秒]</a>
  4.                 <a class="jz jiazai3" id="jiazai3">加载中 [计时2.0秒]</a>
  5.                 <a class="jz jiazai4" id="jiazai4">加载完毕!请稍后...</a>
  6.                 <div class="jz bo bo1 chuantou" id="hide"><img src="./../../bofang.png" width="30" height="30"  /></div>               
  7.                 <a class="chongzai chongzai1"> </a>
  8.                 <a class="chongzai chongzai2"> </a>
  9.                 <a class="chongzai chongzai3"> </a>
  10.                 <a class="chongzai chongzai4"> </a>
  11.                 <a class="chongzaia chongzai5">请点击播放按钮</a>
  12.                 <a class="chongzaia chongzai6">温馨提示:已为您屏蔽所有第三方广告!</a>        
  13.                 <a class="chongzaia chongzai7">技术过滤:G.flower     微信:KDDS888888</a>               
  14. <!--广告遮罩结束-->        
复制代码
js部分:
  1. <script type="text/javascript">
  2. setTimeout(function(){$("#jiazai1").hide()},2000)//1000是1秒//在2000秒后解除第一层遮罩,hide是display:none属性的ⅠD名,可以改成任意名。
  3. setTimeout(function(){$("#jiazai2").hide()},4000)//1000是1秒
  4. setTimeout(function(){$("#jiazai3").hide()},6000)//1000是1秒
  5. setTimeout(function(){$("#jiazai4").hide()},9000)//1000是1秒
  6. </script>
  7. <!--延时显示播放按钮-->
  8. <script language='javascript' type='text/javascript'>
  9. setTimeout(function(){
  10.     document.getElementById('hide').style.display = "block";
  11. },8000);
  12. </script>
复制代码
修改iframe的JS部分:
也可以不用全部修改,只需要在iframe中插入一个z-index="999"
  1. <script type="text/javascript">

  2.           function run(){
  3.         var s = document.getElementById("timer");      
  4.         if(!s){         
  5.             return false;
  6.         }else{
  7.           s.innerHTML = s.innerHTML * 1 - 1;
  8.         }
  9.         
  10.     }
  11.     window.setInterval("run();", 1000);
  12.         $('#cms_player').html('<div style="text-align:center;width:100%;"></div><div id="timer">0</div>');
  13.         //设置延时函数
  14.         function adsUp(){   
  15.         $("#cms_player").html('<iframe id="video" src="这里是你的解析URL" style="width:100%;border:none" allowtransparency="true" allowfullscreen="true" frameborder="0" scrolling="no" z-index="999"></iframe><a style="display:none" id="videourlgo" href="<?php echo $furl;?>"></a>');  
  16.         }
  17.     //五秒钟后自动收起
  18.     var t = setTimeout(adsUp,0);
  19. </script>  
复制代码




QQ浏览器截图20200815163441.png
哎...今天够累的,签到来了4...
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|kedoutd.cn|wdc.store|fll.store|zuz.store|newbe.wang|pvp.store ( 苏ICP备14054272号 )

GMT+8, 2021-2-27 23:57

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表