腾讯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代码和一段时间转换代码

//Cookievar 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")});