MuiPlayer - 弹幕H5播放器增加启动和暂停倒计时贴片广告

MuiPlayer是一款H5视频播放插件，默认配置了精美可配置的播放控件，包括了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。支持 mp4、M3U8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。MuiPlayer 除了默认的简单配置，还具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放。今天来给Muiplayer播放器加一个启动显示贴片广告的功能。

1，引入Muiplayer静态文件和HLS

<link rel="stylesheet" href="mui-player.min.CSS">
<script type="text/JavaScript" src="https://cdn.staticfile.org/HLS.js/1.2.7/hls.min.js"></script>
<script type="text/JavaScript" src="mui-player.min.js"></script>
...
<div id="player"></div>
...

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'https://www.18ma.cn/static/demo.mp4',
    ...});

2，把贴片广告容器追加到页面上

//贴片图片url
var adpic="<?PHP echo $data['adpng']?>";
//贴片跳转链接
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，给Muiplayer播放器绑定一个启动监听事件

4，给贴片广告上的关闭按钮绑定一个点击事件

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

搞定，一起来看看这贴片效果吧！