Dplayer前置广告视频，暂停广告，与试看功能

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，支持HLS，FLV，MPEG DASH，WebTorrent以及其他视频格式，支持截屏、热键、切换清晰度以及字幕等。在使用Dplayer播放视频时有时候，我们可能会用到视频的前置广告视频啥的，或是要先放个自个的品牌宣传视频，然后再进行播放正片。

今天就介绍下吧。

1，引入JQ，这个很重要

2，暂停贴片广告

3，前置视频贴片广告

4，前置HTML贴片广告

5，整合

CSS部分：

1. <style type="text/css"> 
2. html,body{height:100%;margin:0;padding:0;overflow:hidden;text-align:center;background:#181818;} 
3. *{margin:0;border:0;padding:0;text-decoration:none} 
4. #dplayer{height:100%;} 
5. .dplayer-logo{max-width: 150px;max-height: 50px;left: auto;right: 5%;top: 5%;} 
6. #ad{position: absolute;z-index: 99999;width:100%;height:100%} 
7. .closeclick{display: inline-block;width: 100px;height: 35px;line-height: 35px;text-align: center;font-size: 14px;border-radius: 22px;margin: 0px 10px;color: #2082B3;overflow: hidden;box-shadow: 0px 2px 3px rgba(0,0,0,.3);background: #fff;position: absolute; z-index: 9999;top:20px;right: 35px;} 
8. .dplayer_nobuy_tips{position: absolute;z-index: 9;color: #fff;font-size: 14px;height: 30px;line-height: 30px;background-color: rgba(0, 0, 0, 0.5);width: 100%;text-align: center;margin: 0 20px;} 
9. .dplayer_buybox{position: absolute;top: 0;align-items: center;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);z-index: 998;color: #fff;text-align: center;display: flex;font-size: 14px;} 
10. .dplayer_buybox-content{width:100%;height: 100%;background: rgba(0, 0, 0, 0.3);} 
11. .dplayer_buybox-tipsbtn {background: #f60;padding: 5px 15px;border-radius: 2px;cursor: pointer;color: #fff;margin-top: 10px;display: inline-block;} 
12. .dplayer_buybox-content>span {margin: 0 5px;color: #f60;} 
13. .dplayer_buybox-tips {position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-100%);text-align: center;color: #fff;font-size: 14px;line-height: 30px;text-align: center;} 
14. </style> 

HTML部分，放在播放 <div id="dplayer"></div> 上方

1. <div id="dplayer_nobuybox"><div class="dplayer_nobuy_tips">【付费视频】您可以免费试看20秒，购买后可观看全部。</div></div> 
2. <div id="ad" > 
3. <iframe id="player_pread" class="embed-responsive-item" src="https://www.meiweny.cn/d/file/sanwen/tianyuan/2021-08-25/72cb5c72cbdc88fd0c5bebe92badc707.jpg" frameborder="0" scrolling="no" allowtransparency="true" style="position:absolute;z-index:2;top:0px;left:0px;width:100%;height:100%"></iframe> 
4. <a class="closeclick" href="javascript:;"  onclick="closeclick()">跳过<em id="adindextime"></em></a> 
5. </div> 
6. <div id="dplayer_buybox" class="dplayer_buybox" style="display:none;">        
7.  <div class="dplayer_buybox-content"> 
8.  <div class="dplayer_buybox-tips">该视频需要<span>付费购买</span>才可以观看完整版<br> 
9.  <m class="dplayer_buybox-tipsbtn">购买</m> 
10. </div> 
11.  </div> 
12. </div> 

var dp = new DPlayer({ 上方放入

1. var adpreh_time = "20";//前置广告显示时间 
2. var shikan_time = "20";//试看时间 
3. var adpau = 'https://www.meiweny.cn/d/file/sanwen/tianyuan/2021-08-25/72cb5c72cbdc88fd0c5bebe92badc707.jpg';//暂停广告 
4. function remove(){ 
5. $('#player_pause').remove(); 
6. } 
7. function pause(){ 
8. $width = $('#dplayer').width()/2; 
9. $height = $('#dplayer').height()/2; 
10. $top = $('#dplayer').height()/4; 
11. $left = $('#dplayer').width()/4; 
12. $('#dplayer').before('<iframe id="player_pause" class="embed-responsive-item" src="'+ adpau +'" frameborder="0" scrolling="no" allowtransparency="true" style="position:absolute;z-index:2;top:'+$top+'px;left:'+$left+'px;width:'+$width+'px;height:'+$height+'px"></iframe>'); 
13. } 

var dp = new DPlayer({//省略播放器配置参数});下方放入

1. dp.on('timeupdate', function () { 
2. if (dp.dplayer.currentTime > shikan_time) {//视频时间，单位’秒‘，建议减1秒 
3. dp.pause(); 
4. dp.dplayer.currentTime = 0; 
5. $("#dplayer_buybox").show(); 
6. $('#player_pause').remove(); 
7. $('#dplayer_nobuybox').remove();             
8. } 
9. }); 
10. dp.on('pause', function () { 
11. pause(); 
12. }) 
13. dp.on('play', function () { 
14. remove(); 
15. });      
16. function closeclick() { 
17. $('#ad').remove(); 
18. $("#player_predplayer").show(); 
19. dp.play(); 
20. } 
21. function clickclose() { 
22. $('#ad').remove() 
23. $("#player_predplayer").show(); 
24. dp.play(); 
25. } 
26. $(function() {      
27. $("#player_pread").css('width',$('#ad').width()/1.3); 
28. $("#player_pread").css('height',$('#ad').height()/1.3); 
29. $("#player_pread").css('top',$('#ad').height()/9); 
30. $("#player_pread").css('left',$('#ad').width()/9);  
31. var i = adpreh_time;//前置HTML广告时间 
32. setTimeout(function() { 
33. closeclick(); 
34. }, i * 1000); 
35. after(); 
36. function after() { 
37. if (i == 0) { 
38. $("#adindextime").empty().append(i); 
39. setTimeout(function() { 
40. after(); 
41. }, 1000); 
42. }  
43. else { 
44. $("#adindextime").empty().append(i); 
45. i = i - 1; 
46. setTimeout(function() { 
47. after(); 
48. }, 1000); 
49. } 
50. }  
51. }); 

最后附上整合版

1. <!DOCTYPE html> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <meta name="referrer" content="no-referrer" /> 
6. <meta http-equiv="Access-Control-Allow-Origin" content="*" /> 
7. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />  
8. <title>播放器</title> 
9. <link href="https://www.meiweny.cn/e/m/DPlayer/DPlayer.min.css" rel="stylesheet"> 
10. <script type="text/javascript" src="https://www.meiweny.cn/e/m/DPlayer/flv.js"></script> 
11. <script type="text/javascript" src="https://www.meiweny.cn/e/m/DPlayer/hls.js"></script> 
12. <script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script> 
13. <script src="https://www.meiweny.cn/e/m/DPlayer/DPlayer.min.js"></script> 
14. <script type="text/javascript" src="https://www.meiweny.cn/e/m/DPlayer/md5.min.js"></script> 
15. <script type="text/javascript" src="https://www.meiweny.cn/e/m//dasang/js/jquery.js"></script> 
16. <style type="text/css"> 
17. html,body{height:100%;margin:0;padding:0;overflow:hidden;text-align:center;background:#181818;} 
18. *{margin:0;border:0;padding:0;text-decoration:none} 
19. #dplayer{height:100%;} 
20. .dplayer-logo{max-width: 150px;max-height: 50px;left: auto;right: 5%;top: 5%;} 
21. #ad{position: absolute;z-index: 99999;width:100%;height:100%} 
22. .closeclick{display: inline-block;width: 100px;height: 35px;line-height: 35px;text-align: center;font-size: 14px;border-radius: 22px;margin: 0px 10px;color: #2082B3;overflow: hidden;box-shadow: 0px 2px 3px rgba(0,0,0,.3);background: #fff;position: absolute; z-index: 9999;top:20px;right: 35px;} 
23. .dplayer_nobuy_tips{position: absolute;z-index: 9;color: #fff;font-size: 14px;height: 30px;line-height: 30px;background-color: rgba(0, 0, 0, 0.5);width: 100%;text-align: center;margin: 0 20px;} 
24. .dplayer_buybox{position: absolute;top: 0;align-items: center;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);z-index: 998;color: #fff;text-align: center;display: flex;font-size: 14px;} 
25. .dplayer_buybox-content{width:100%;height: 100%;background: rgba(0, 0, 0, 0.3);} 
26. .dplayer_buybox-tipsbtn {background: #f60;padding: 5px 15px;border-radius: 2px;cursor: pointer;color: #fff;margin-top: 10px;display: inline-block;} 
27. .dplayer_buybox-content>span {margin: 0 5px;color: #f60;} 
28. .dplayer_buybox-tips {position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-100%);text-align: center;color: #fff;font-size: 14px;line-height: 30px;text-align: center;} 
29. </style> 
30. <div id="dplayer_nobuybox"><div class="dplayer_nobuy_tips">【付费视频】您可以免费试看20秒，购买后可观看全部。</div></div> 
31. <div id="ad" > 
32. <iframe id="player_pread" class="embed-responsive-item" src="https://www.meiweny.cn/d/file/sanwen/tianyuan/2021-08-25/72cb5c72cbdc88fd0c5bebe92badc707.jpg" frameborder="0" scrolling="no" allowtransparency="true" style="position:absolute;z-index:2;top:0px;left:0px;width:100%;height:100%"></iframe> 
33. <a class="closeclick" href="javascript:;"  onclick="closeclick()">跳过<em id="adindextime"></em></a> 
34. </div> 
35. <div id="dplayer_buybox" class="dplayer_buybox" style="display:none;"> 
36.            
37.         <div class="dplayer_buybox-content"> 
38.                 <div class="dplayer_buybox-tips">该视频需要<span>付费购买</span>才可以观看完整版<br> 
39.                         <m class="dplayer_buybox-tipsbtn">购买</m> 
40.                 </div> 
41.         </div> 
42. </div> 
43. <div id="dplayer"></div> 
44.    
45.    
46. <script type="text/javascript"> 
47. var adpreh_time = "20";//前置广告显示时间 
48. var shikan_time = "20";//试看时间 
49. var adpau = 'https://www.meiweny.cn/d/file/sanwen/tianyuan/2021-08-25/72cb5c72cbdc88fd0c5bebe92badc707.jpg';//暂停广告 
50. function remove(){ 
51. $('#player_pause').remove(); 
52. } 
53. function pause(){ 
54. $width = $('#dplayer').width()/2; 
55. $height = $('#dplayer').height()/2; 
56. $top = $('#dplayer').height()/4; 
57. $left = $('#dplayer').width()/4; 
58. $('#dplayer').before('<iframe id="player_pause" class="embed-responsive-item" src="'+ adpau +'" frameborder="0" scrolling="no" allowtransparency="true" style="position:absolute;z-index:2;top:'+$top+'px;left:'+$left+'px;width:'+$width+'px;height:'+$height+'px"></iframe>'); 
59. } 
60.    
61.  
62.  
63.  
64.      
65. var dp = new DPlayer({ 
66.     container: document.getElementById('dplayer'), 
67.     //screenshot: true,//截屏 
68.     theme: '#4C8FE8',//进度条颜色 
69.     volume: 1.0,//音量 
70.     loop: true,//循环 
71.     logo: '',//LOGO 
72.     //autoplay: true,//自动播放 
73.     video: { 
74.         quality: [{ 
75.             name: '高清', 
76.             url:'https://vod.cdbaiyou.com/20210721/km18yXmO/1059kb/hls/index.m3u8', 
77.             //type: 'normal' 
78.         }], 
79.               pic: 'https://ww3.sinaimg.cn/large/0060lm7Tly1fke6b991zzg30jq0dwaar.gif', 
80.         defaultQuality: 0 
81.     }, 
82.  
83. }); 
84.  
85.      
86.  
87. dp.on('timeupdate', function () { 
88. if (dp.dplayer.currentTime > shikan_time) {//视频时间，单位’秒‘，建议减1秒 
89. dp.pause(); 
90. dp.dplayer.currentTime = 0; 
91. $("#dplayer_buybox").show(); 
92. $('#player_pause').remove(); 
93. $('#dplayer_nobuybox').remove();             
94. } 
95. }); 
96. dp.on('pause', function () { 
97. pause(); 
98. }) 
99. dp.on('play', function () { 
100. remove(); 
101. });      
102. function closeclick() { 
103. $('#ad').remove(); 
104. $("#player_predplayer").show(); 
105. dp.play(); 
106. } 
107. function clickclose() { 
108. $('#ad').remove() 
109. $("#player_predplayer").show(); 
110. dp.play(); 
111. } 
112. $(function() {      
113. $("#player_pread").css('width',$('#ad').width()/1.3); 
114. $("#player_pread").css('height',$('#ad').height()/1.3); 
115. $("#player_pread").css('top',$('#ad').height()/9); 
116. $("#player_pread").css('left',$('#ad').width()/9);  
117. var i = adpreh_time;//前置HTML广告时间 
118. setTimeout(function() { 
119. closeclick(); 
120. }, i * 1000); 
121. after(); 
122. function after() { 
123. if (i == 0) { 
124. $("#adindextime").empty().append(i); 
125. setTimeout(function() { 
126. after(); 
127. }, 1000); 
128. }  
129. else { 
130. $("#adindextime").empty().append(i); 
131. i = i - 1; 
132. setTimeout(function() { 
133. after(); 
134. }, 1000); 
135. } 
136. }  
137. }); 
138. </script> 
139.   </body> 
140. </html> 

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，支持HLS，FLV，MPEG DASH，WebTorrent以及其他视频格式，支持截屏、热键、切换清晰度以及字幕等。更多相关二次开发敬请期待！