Artplayer - 轻量开源的弹幕H5播放器增加启动和暂停贴片广告

Artplayer是一个现代且功能齐全的H5播放器。它不仅全开源且提供了丰富的功能和插件，可以轻松地兼容集成到您的网站或应用程序中。广告收入一直以来都是网站和APP运营者的主要收入来源之一，对于视频站点来说有过之而无不及，所以有一个带贴片广告功能的播放器就变得尤为重要了，今天我们来看看Artplayer播放器是如何实现贴片广告功能的。由于Artplayer播放器没有自带的贴片广告功能，所以我们需要借助JS代码来实现，思路是在播放器在开始加载视频数据之时，在页面追加带倒计时一个贴片广告，在播放视频之中播放器被用户暂停也触发页面显示贴片广告。接下来进入实操：

1，先来引入Artplayer和HLS静态文件，并设置参数初始化播放器

<script src="https://cdn.bootcdn.net/Ajax/libs/artplayer/5.0.9/artplayer.min.js"></script>
<script src="https://cdn.bootcdn.net/Ajax/libs/HLS.js/1.4.12/hls.min.js"></script> 
...
<div id="player"></div>
<script type="text/JavaScript">
var vid = 'https://www.18ma.cn/static/demo.M3U8';
var art = new Artplayer({
	container: '#player',
	url: vid,
	autoplay: false,
	autoSize: false,
	loop: false,
	mutex: true,
});

2，把贴片广告的容器和样式追加到页面中

//贴片图片url
var adpic='https://www.18ma.cn/static/demo.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，监听Artplayer播放器初始化加载数据和暂停状态，并在合适的时候显示贴片

4，搞完收工，Artplayer已经是带贴片广告功能的H5播放器啦！