腾讯H5播放器Tcplayer - 增加记忆播放功能

腾讯H5播放器Tcplayer是一款不错的web播放器，被广泛应用到各个站点和应用之中，今天我们来看看怎么在TcplayerH5播放器中添加记忆播放的功能。

首先在web播放器页面中添加一个记忆播放提示框容器的样式

<style type="text/CSS">
#tips{position:absolute; z-index:209910539; right:3%; bottom:10%; background: #000000a6; font-size:15px; color:#FFF; padding:8px; border-radius:4px;}
#go{color: #66CCCC}
.hide{display:none}
</style>

在页面js代码中加入一段Cookie代码和一段时间转换代码

//Cookie
var cookie={'set':function(name,value,days){var exp=new Date();exp.setTime(exp.getTime()+days*24*60*60*1000);var arr=document.cookie.match(new RegExp('(^| )'+name+'=([^;]*)(;|$)'));document.cookie=name+'='+escape(value)+';path=/;expires='+exp.toUTCString()},'get':function(name){var arr=document.cookie.match(new RegExp('(^| )'+name+'=([^;]*)(;|$)'));if(arr!=null)return unescape(arr[2])},'put':function(urls){var cookie=urls.replace(/[^a-z]+/ig,'');var cookie=cookie.substring(cookie.length-32);return cookie}};

//将缓存已播秒数转换成标准时间格式
function formatSeconds(value){var theTime=parseInt(value);var theTime1=0;var theTime2=0;if(theTime>60){theTime1=parseInt(theTime/60);theTime=parseInt(theTime%60);if(theTime1>60){theTime2=parseInt(theTime1/60);theTime1=parseInt(theTime1%60)}var result=""+prefixInteger(parseInt(theTime),2)+""}else{var result="00:"+prefixInteger(parseInt(theTime),2)+""}if(theTime1>0){result=""+prefixInteger(parseInt(theTime1),2)+":"+result}if(theTime2>0){result=""+prefixInteger(parseInt(theTime2),2)+":"+result}return result}function prefixInteger(num,n){return(Array(n).join(0)+num).slice(-n)}

然后在Tcplayer播放器参数中加入监听播放时间变化并写入缓存.若播放终端已有缓存则自动载入缓存并跳转至该时间刻度

var player = new TcPlayer('player', {
	"M3U8": 'https://www.llbk.cn/static/demo.M3U8',//视频地址-标清
	"autoplay" : true,//自动播放
	"volume": 1, //默认音量
[CommShow]
    listener: function (msg) {
        if(msg.type == 'timeupdate') {
			if (cookie) cookie.set(vid, player.currentTime(), 30);
		};
        if(msg.type == 'loadedmetadata') {
			if(cc > 0) {
				$('#tIPs').HTML('<a id="xx">X　</a>'+"上次看到 " + formatSeconds(ss) + ' <a id="go">继续</a>');
				$('#tips').removeClass("hide");
				setTimeout(function () {$('#tips').addClass("hide")}, 20000);
			}
		};
    },
});

最后把记忆播放提示框容器追加进去,还有跳转按钮绑定一下点击事件

$('.vcp-player').append('<div id="tips" class="hide"></div>');

$('.vcp-player').on("click",'#xx',function(e){
	player.currentTime(0);
	player.play();
	$('#tips').addClass("hide")
});

$('.vcp-player').on("click",'#go',function(e){
	player.currentTime(cc);
	player.play();
	$('#tips').addClass("hide")
});