CKplayer - 增加播放前的贴片广告功能，带倒计时可自由关闭

广告收入一直以来都是网站和APP运营者的主要收入来源之一，对于视频站点来说有过之而无不及，所以有一个带贴片广告功能的播放器就变得尤为重要了，今天我们来看看CKplayer播放器是如何实现贴片广告功能的。

使用比较广泛的H5播放器CKplayer提供的贴片广告方式有三种：

1，视频贴片广告

2，图片贴片广告

3，自定义贴片广告

接下来说说这几种广告参数是如何实现的，

在页面中添加贴片广告元素的类名

<style type="text/CSS">
.adfront{
    width: 100%;
    height: 100%;
    background: #000000;
    display: none;
}
.adfront .content{
    width: 50%;
    height: 50%;
    color: #FFF;
    position: absolute;
    background: #0000CC;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 30px;
    line-height: 38px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */	
    padding: 50px;
}
</style>

在ckplayer播放器中加入广告参数

然后再加上广告点击关闭的事件绑定

function closeFront(){//用户点击关闭广告触发
	player.closeFrontAd();//关闭广告
};