在使用Dplayer播放视频时有时候,我们可能会用到视频的前置广告视频啥的,或是要先放个自个的品牌宣传视频,然后再进行播放正片.
今天就介绍下吧.
1,引入 <script src="//mat1.gtimg.com/libs/jquery/1.11.3/jquery.min.js"></script>,这个很重要
2,暂停贴片广告
3,前置视频贴片广告
4,前置HTML贴片广告
5,整合
暂停贴片广告
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function h2_remove(){ $('#h2_player_pause').remove(); } function h2_pause(){ $width = $('#video').width()/2; $height = $('#video').height()/2; $top = $('#video').height()/4; $left = $('#video').width()/4; $('#video').before('<iframe id="cms_player_pause" class="embed-responsive-item" src="广告页面地址" 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>'); } //下方是正式的播放地址 var dp = new DPlayer({ container: document.getElementById('video'), ........//此处为省略部分,请自行补充完整 }); dp.on('pause', function () { h2_pause(); }) dp.on('play', function () { h2_remove(); }); |
前置视频贴片广告
这里没做跳过广告,此处代码不能与下方前置HTML前置贴片共用,想要公共,自行调式修改下一些控制播放的地方就行
HTML部分,放在播放 <div id="video" ></div> 上方 , 且这一行最好隐藏即<div id="video" style="display:none;" ></div>
1 | <div id="h2_player_prevideo" style="height:100%;"></div> |
JS部分,放在var dp = new DPlayer({........}); 上方
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var ad = new DPlayer({ container: document.getElementById('h2_player_prevideo'), theme: '#4C8FE8',//进度条颜色 volume: 1.0,//音量 logo: '//www.h2sheji.com/template/zds_h2sheji/image/logo.png',//LOGO autoplay: true,//自动播放(注意这里是自动播放的)//与前置HTML广告共用时需要关闭 mutex: true, video: { quality: [{ name: '广告', url: 'https://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4',//广告视频地址 }], pic: 'https://ww3.sinaimg.cn/large/0060lm7Tly1fke6b991zzg30jq0dwaar.gif', defaultQuality: 0 }, }); ad.on('timeupdate', function () { if (ad.video.currentTime > '6') {//视频时间,单位’秒‘,建议减1秒 $("#h2_player_prevideo").remove(); $("#video").show(); dp.play(); ad.destroy() } }); |
前置贴片广告。
CSS部分:(这个主要是关闭按钮)
1 2 | #ad{position: absolute;z-index: 99999;width:100%;height:100%} .h2_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;} |
HTML部分,放在播放 <div id="video"></div> 上方
1 2 3 4 | <div id="ad" > <iframe id="h2_player_pread" class="embed-responsive-item" src="广告页面" frameborder="0" scrolling="no" allowtransparency="true" style="position:absolute;z-index:2;top:0px;left:0px;width:100%;height:100%"></iframe> <a class="h2_closeclick" href="javascript:;">跳过<em id="h2_adindextime"></em></a> </div> |
JS部分,dplayer播放器不要开启自动播放,即 autoplay:false, (dplayer播放器默认即为false)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | function closeclick() { $('#ad').remove(); $("#video").show(); if (dp.video.currentTime <= 0 || dp.video.paused == false) {//判断还在前置贴片广告时间内暂停 dp.play(); } } function clickclose() { $('#ad').remove() $("#video").show(); dp.play(); } $(function() { $("#h2_player_pread").css('width',$('#ad').width()/1.3); $("#h2_player_pread").css('height',$('#ad').height()/1.3); $("#h2_player_pread").css('top',$('#ad').height()/9); $("#h2_player_pread").css('left',$('#ad').width()/9); var i = 20;//广告显示时间 setTimeout(function() { closeclick(); }, i * 1000); after(); function after() { if (i == 0) { $("#h2_adindextime").empty().append(i); setTimeout(function() { after(); }, 1000); } else { $("#h2_adindextime").empty().append(i); i = i - 1; setTimeout(function() { after(); }, 1000); } } }); |
最后附上3种整合版
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="referrer" content="no-referrer" /> <meta http-equiv="Access-Control-Allow-Origin" content="*" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <title>Dplayer播放器</title> <link rel="stylesheet" href="//lib.baomitu.com/dplayer/1.25.0/DPlayer.min.css"> <script type="text/javascript" src="//lib.baomitu.com/hls.js/0.9.0/hls.min.js"></script> <script type="text/javascript" src="//lib.baomitu.com/dplayer/1.25.0/DPlayer.min.js"></script> <script src="//mat1.gtimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> html,body{height:100%;margin:0;padding:0;overflow:hidden;text-align:center;background:#181818;} *{margin:0;border:0;padding:0;text-decoration:none} #video{height:100%;} .dplayer-logo{max-width: 150px;max-height: 50px;left: auto;right: 5%;top: 5%;} #ad{position: absolute;z-index: 99999;width:100%;height:100%} .h2_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;} </style> <div id="ad" > <iframe id="h2_player_pread" class="embed-responsive-item" src="http://www.h2sheji.com" frameborder="0" scrolling="no" allowtransparency="true" style="position:absolute;z-index:2;top:0px;left:0px;width:100%;height:100%"></iframe> <a class="h2_closeclick" href="javascript:;" onclick="closeclick()">跳过<em id="h2_adindextime"></em></a> </div> <div id="h2_player_prevideo" style="height:100%;"></div> <div id="video" style="display:none;"></div> <script type="text/javascript"> function h2_remove(){ $('#cms_player_pause').remove(); } function h2_pause(){ $width = $('#video').width()/2; $height = $('#video').height()/2; $top = $('#video').height()/4; $left = $('#video').width()/4; $('#video').before('<iframe id="cms_player_pause" class="embed-responsive-item" src="http://www.h2sheji.com" 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>'); } var ad = new DPlayer({ container: document.getElementById('h2_player_prevideo'), theme: '#4C8FE8',//进度条颜色 volume: 1.0,//音量 logo: '//www.h2sheji.com/template/zds_h2sheji/image/logo.png',//LOGO autoplay: false,//自动播放(注意这里是自动播放的)//与前置HTML广告共用时需要关闭 mutex: true, video: { quality: [{ name: '广告', url: 'http://www.h2sheji.com/demo/Ad/ad.m3u8',//广告视频地址 }], pic: 'https://ww3.sinaimg.cn/large/0060lm7Tly1fke6b991zzg30jq0dwaar.gif', defaultQuality: 0 }, }); ad.on('timeupdate', function () { if (ad.video.currentTime > '17') {//视频时间,单位’秒‘,建议减1秒 $("#h2_player_prevideo").remove(); $("#video").show(); dp.play(); ad.destroy() } }); var dp = new DPlayer({ container: document.getElementById('video'), //screenshot: true,//截屏 theme: '#4C8FE8',//进度条颜色 volume: 1.0,//音量 loop: true,//循环 logo: '//www.h2sheji.com/template/zds_h2sheji/image/logo.png',//LOGO //autoplay: true,//自动播放 video: { quality: [{ name: '高清', url: 'https://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', //type: 'normal' }], pic: 'https://ww3.sinaimg.cn/large/0060lm7Tly1fke6b991zzg30jq0dwaar.gif', defaultQuality: 0 }, }); dp.on('pause', function () { h2_pause(); }) dp.on('play', function () { h2_remove(); }); function closeclick() { $('#ad').remove(); $("#h2_player_prevideo").show(); if (ap.video.currentTime <= 0 || ap.video.paused == false) {//判断还在前置贴片广告时间内暂停 ap.play(); } } function clickclose() { $('#ad').remove() $("#h2_player_prevideo").show(); ad.play(); } $(function() { $("#h2_player_pread").css('width',$('#ad').width()/1.3); $("#h2_player_pread").css('height',$('#ad').height()/1.3); $("#h2_player_pread").css('top',$('#ad').height()/9); $("#h2_player_pread").css('left',$('#ad').width()/9); var i = 20;//前置HTML广告时间 setTimeout(function() { closeclick(); }, i * 1000); after(); function after() { if (i == 0) { $("#h2_adindextime").empty().append(i); setTimeout(function() { after(); }, 1000); } else { $("#h2_adindextime").empty().append(i); i = i - 1; setTimeout(function() { after(); }, 1000); } } }); </script> </body> </html> |
试看功能,自个研究:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="referrer" content="no-referrer" /> <meta http-equiv="Access-Control-Allow-Origin" content="*" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <title>Dplayer播放器</title> <link rel="stylesheet" href="//lib.baomitu.com/dplayer/1.25.0/DPlayer.min.css"> <script type="text/javascript" src="//lib.baomitu.com/hls.js/0.9.0/hls.min.js"></script> <script type="text/javascript" src="//lib.baomitu.com/dplayer/1.25.0/DPlayer.min.js"></script> <script src="//mat1.gtimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> html,body{height:100%;margin:0;padding:0;overflow:hidden;text-align:center;background:#181818;} *{margin:0;border:0;padding:0;text-decoration:none} #video{height:100%;} .dplayer-logo{max-width: 150px;max-height: 50px;left: auto;right: 5%;top: 5%;} #ad{position: absolute;z-index: 99999;width:100%;height:100%} .h2_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;} .h2_video_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;} .h2_video_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;} .h2_video_buybox-content{width:100%;height: 100%;background: rgba(0, 0, 0, 0.3);} .h2_video_buybox-tipsbtn {background: #f60;padding: 5px 15px;border-radius: 2px;cursor: pointer;color: #fff;margin-top: 10px;display: inline-block;} .h2_video_buybox-content>span {margin: 0 5px;color: #f60;} .h2_video_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;} </style> <div id="h2_video_nobuybox"><div class="h2_video_nobuy_tips">【付费视频】您可以免费试看20秒,购买后可观看全部。</div></div> <div id="ad" > <iframe id="h2_player_pread" class="embed-responsive-item" src="http://www.h2sheji.com" frameborder="0" scrolling="no" allowtransparency="true" style="position:absolute;z-index:2;top:0px;left:0px;width:100%;height:100%"></iframe> <a class="h2_closeclick" href="javascript:;" onclick="closeclick()">跳过<em id="h2_adindextime"></em></a> </div> <div id="h2_video_buybox" class="h2_video_buybox" style="display:none;"> <div class="h2_video_buybox-content"> <div class="h2_video_buybox-tips">该视频需要<span>付费购买</span>才可以观看完整版<br> <m class="h2_video_buybox-tipsbtn">购买</m> </div> </div> </div> <div id="video"></div> <script type="text/javascript"> var h2_adpreh_time = "20"; var h2_shikan_time = "20"; var h2_adpau = 'http://www.h2sheji.com/'; var h2_viurl = 'https://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'; function h2_remove(){ $('#cms_player_pause').remove(); } function h2_pause(){ $width = $('#video').width()/2; $height = $('#video').height()/2; $top = $('#video').height()/4; $left = $('#video').width()/4; $('#video').before('<iframe id="cms_player_pause" class="embed-responsive-item" src="'+%20h2_adpau%20+'" 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>'); } var dp = new DPlayer({ container: document.getElementById('video'), //screenshot: true,//截屏 theme: '#4C8FE8',//进度条颜色 volume: 1.0,//音量 loop: true,//循环 logo: '//www.h2sheji.com/template/zds_h2sheji/image/logo.png',//LOGO //autoplay: true,//自动播放 video: { quality: [{ name: '高清', url:h2_viurl, //type: 'normal' }], pic: 'https://ww3.sinaimg.cn/large/0060lm7Tly1fke6b991zzg30jq0dwaar.gif', defaultQuality: 0 }, }); dp.on('timeupdate', function () { if (dp.video.currentTime > h2_shikan_time) {//视频时间,单位’秒‘,建议减1秒 dp.pause(); dp.video.currentTime = 0; $("#h2_video_buybox").show(); $('#cms_player_pause').remove(); $('#h2_video_nobuybox').remove(); } }); dp.on('pause', function () { h2_pause(); }) dp.on('play', function () { h2_remove(); }); function closeclick() { $('#ad').remove(); $("#h2_player_prevideo").show(); dp.play(); } function clickclose() { $('#ad').remove() $("#h2_player_prevideo").show(); dp.play(); } $(function() { $("#h2_player_pread").css('width',$('#ad').width()/1.3); $("#h2_player_pread").css('height',$('#ad').height()/1.3); $("#h2_player_pread").css('top',$('#ad').height()/9); $("#h2_player_pread").css('left',$('#ad').width()/9); var i = h2_adpreh_time;//前置HTML广告时间 setTimeout(function() { closeclick(); }, i * 1000); after(); function after() { if (i == 0) { $("#h2_adindextime").empty().append(i); setTimeout(function() { after(); }, 1000); } else { $("#h2_adindextime").empty().append(i); i = i - 1; setTimeout(function() { after(); }, 1000); } } }); </script> </body> </html> |
文章转载自:https://www.h2sheji.com/art/dplayer-ad.html
评论