Plyr - 经典HTML5播放器增加带倒计时可关闭的贴片广告功能

Plyr这款经典耐看的H5播放器优势自不用多说了，其对众多终端设备的支持以及对各种视频格式流媒体等支持也值得广大视频站长信赖。广告是视频站的主要收入来源之一，所以在Plyr播放器上适当的添加上启动和暂停的贴片广告不会影响用户体验还能增加站长收入，今天就来做一个Plyr播放器贴片广告的教程：

1，引入Plyr和JQuery静态CDN并初始化播放器

<link rel="stylesheet" href="https://cdn.staticfile.org/plyr/3.6.8/plyr.min.CSS" />
<script type="text/JavaScript" src="https://cdn.staticfile.org/plyr/3.6.8/plyr.min.js"></script>
<script type="text/JavaScript" src="https://cdn.staticfile.org/JQuery/3.4.1/jquery.min.js"></script>
...
<div id="player"><video id="video" controls crossorigin playsinline src="https://www.18ma.cn/static/demo.mp4" poster="https://www.18ma.cn/static/demo.jpg"></video></div>
...
<script type="text/javascript">
//视频地址
const source = document.getElementById("video").src;
const video = document.querySelector('video');
const player = new Plyr(video, {
	autoplay: false,
	volume: 1,
	speed: { 
		selected: 1, 
		options: [0.5, 1, 1.5, 2] 
	},
});
</script>

2，在HTML追加贴片广告容器和样式

//贴片图片url
var adpic="https://www.18ma.cn/static/ad.jpg";
//贴片跳转链接
var adlink='https://www.18ma.cn';
//倒计时读秒
var adtim='9';
//是否自动关闭,是=1,否=0,
var autoclose='1';
//追加贴片元素
$('.plyr').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，监听Plyr播放器状态，在启动时和暂停时执行贴片广告显示操作