VideoJS播放器 - 增加播放器和暂停时贴片广告，带倒计时可关闭

Videojs是一个开源的HTML5视频播放器，它可以在各种设备和浏览器上播放视频。Videojs提供了丰富的API和插件，可以实现自定义的视频播放功能。广告收入一直以来都是网站和APP运营者的主要收入来源之一，对于视频站点来说有过之而无不及，所以有一个带贴片广告功能的播放器就变得尤为重要了，今天我们来看看Videojs播放器是如何实现贴片广告功能的。思路：先在web播放器页面追加一个用来放置贴片广告的容器，在容器元素里放入广告图片，点击图片能跳转到指定的广告链接，在Videojs播放器启动加载数据时或者在用户操作播放器暂停时将这个贴片广告显示出来就是我们想要的效果，说干就干，今天咱们就来做这个Videojs贴片广告教程：

1，引入Videojs静态文件CDN

<link rel="stylesheet" href="https://cdn.staticfile.net/video.js/7.7.1/video-js.min.CSS">
<script type="text/JavaScript" src="https://cdn.staticfile.net/video.js/7.7.1/video.min.js" charset="utf-8"></script>

...

<script type="text/JavaScript">
var options = {
    controls: true,//控制栏true
    autoplay: false,//自动播放false
    sources: [{src: ‘https://www.18ma.cn/static/demo.M3U8’}],//视频地址
};
var player = videojs('player', options, function oNPlayerReady() {});

2，在页面中追加一个容器，用来做贴片广告图片的容器

//贴片图片url
var adpic="https://www.18ma.cn/static/ad.jpg";
//贴片跳转链接
var adlink='https://www.18ma.cn';
//倒计时读秒
var adtim='9';
//是否自动关闭,是=1,否=0,
var autoclose='1';
//追加贴片容器
$('#player').prepend('<div class="adbox"><a href="' + adlink + '" target="_blank" rel="nofollow"><img src="' + adpic + '"></a><span id="closead">关闭广告</span><span id="adtext">秒后可关闭广告</span><span id="adtime">'+adtim+'</span></div><style type="text/CSS">.adbox{position:absolute;z-index:99999999999;margin:auto;top:0;bottom:0;left:0;right:0;width:500px;height:320px}.adbox img{width:100%;height:100%;position:absolute;margin:auto;top:0;left:0;border-radius:7px}#adtime,#adtext,#closead{position:relative;z-index: 99999999999;color:#FFF;background:#181818;float:right;font-size:14px}#adtime{padding: 10px 1px 10px 10px;border-radius: 5px 0 0 5px;color:#FF9900}#adtext{padding: 10px 10px 10px 1px;border-radius: 0 5px 5px 0;}#closead{display:none;padding:10px;border-radius:5px;cursor: pointer;}@media (max-width: 768px){.adbox{width:65%;height:65%;}#adtime{padding: 5px 0 5px 5px;border-radius: 5px 0 0 5px}#adtext{padding: 5px 5px 5px 0;border-radius: 0 5px 5px 0;}#closead{padding:5px;border-radius:5px;}}</style>');

3，加入Videojs播放器初始启动时加载数据监听事件和播放器暂停时监听事件

4，最后把贴片广告上的关闭按钮绑定点击事件

$('#player').on("click",'#closead',function(e){
	$(".adbox").toggle();
});

到这里我们已经为Videojs播放器添加了启动和暂停的贴片广告功能了。