给Dplayer添加前置广告视频,暂停广告与试看功能

CaiBao

61
文章

3
评论

2020年6月9日17:54:12 评论浏览：416 829字阅读2分45秒

在使用Dplayer播放视频时有时候,我们可能会用到视频的前置广告视频啥的,或是要先放个自个的品牌宣传视频，然后再进行播放正片.
今天就介绍下吧.
1，引入 <script src="//mat1.gtimg.com/libs/jquery/1.11.3/jquery.min.js"></script>,这个很重要
2，暂停贴片广告
3，前置视频贴片广告
4，前置HTML贴片广告
5，整合

暂停贴片广告

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();
});

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>

<div id="h2_player_prevideo"  style="height:100%;"></div>

1	<div id="h2_player_prevideo" style="height:100%;"></div>

JS部分，放在var dp = new DPlayer({........}); 上方

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()
           }
});

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: [{

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部分：(这个主要是关闭按钮)

#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;}

#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> 上方

<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>

</div>

JS部分，dplayer播放器不要开启自动播放，即 autoplay:false, (dplayer播放器默认即为false)

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);
    }
}
  
});

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种整合版

<!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>

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>

<head>

<title>Dplayer播放器</title>

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%}

</style>

</div>

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: [{

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: [{

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>

试看功能，自个研究：

<!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>

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>

<head>

<title>Dplayer播放器</title>

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_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>

<div class="h2_video_buybox-tips">该视频需要<span>付费购买</span>才可以观看完整版<br>

</div>

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: [{

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

暂停贴片广告

前置视频贴片广告

前置贴片广告。

最后附上3种整合版

发表评论 取消回复

发表评论取消回复