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

前置视频贴片广告

这里没做跳过广告，此处代码不能与下方前置HTML前置贴片共用，想要公共，自行调式修改下一些控制播放的地方就行

HTML部分,放在播放 <div id=”video” ></div> 上方 , 且这一行最好隐藏即

</div>

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

前置贴片广告。

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

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>

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

最后附上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>

试看功能，自个研究：

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

© 允许规范转载