腾讯H5播放器Tcplayer - 增加带倒计时可关闭的贴片广告

腾讯云web超级播放器Tcplayer是为了解决在手机浏览器和 PC 浏览器上播放音视频流的问题，它使您的视频内容可以不依赖用户安装 app，就能在朋友圈和微博等社交平台进行传播。广告收入一直以来都是网站和APP运营者的主要收入来源之一，对于视频站点来说有过之而无不及，所以有一个带贴片广告功能的播放器就变得尤为重要了，今天我们来看看Tcplayer播放器是如何实现贴片广告功能的。

1，引入TCplayer静态CDN文件

<script type="text/JavaScript" src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></scrIPt>

2，在TCplayer的H5播放器参数中添加启动加载数据、暂停、播放等监听

var player = new TcPlayer('player', {
	"M3U8": ‘https://llbk.cn/demo.M3U8’,//视频地址-标清
	"poster" :‘https://llbk.cn/demo.jpg’,//视频封面
	"width" :  '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
	"height" : '100%',//视频的显示高度，请尽量使用视频分辨率高度
	
    listener: function (msg) {
        if(msg.type == 'loadedmetadata') {
	        function tipstime(count){
		        $('#adtime').text(count);
		        if (count == 0) {
			        $("#adtext,#adtime,#closead").toggle();
			        if (autoclose == 1) {$(".adbox").toggle()};
					$('.adbox').addClass('over');
		        } else {
			        count -= 1;
			        setTimeout(function () {
						tipstime(count);
					}, 1000);
				}
	        }tipstime(adtim);
		}else if(msg.type == 'pause') {
			if($(".adbox").hasClass('over')){
				$(".adbox").show();
				$("#closead").show();
			};
		}else if(msg.type == 'play') {
			if($(".adbox").hasClass('over')){
				$(".adbox").hide();
				$("#closead").hide();
			};
		};
    },});

3，在页面中追加一个贴片广告的容器

//贴片图片
urlvar adpic=‘https://llbk.cn/ad.jpg’;
//贴片跳转链接
var adlink='https://www.llbk.cn';
//倒计时读秒
var adtim='9';
//是否自动关闭,是=1,否=0,
var autoclose='1';
//追加贴片元素
$('.vcp-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>');

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

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

5，大功告成啦，TCplayer超级web播放器已经有了贴片广告功能了！