Artplayer - 轻量开源的弹幕H5播放器增加记忆播放和提示框

Artplayer是一个现代且功能齐全的H5播放器。它不仅全开源且提供了丰富的功能和插件，可以轻松地兼容集成到您的网站或应用程序中。今天我们给这款热门H5播放器增加一个带提示框的记忆播放功能，让Artplayer播放器的性能更上一层楼。接下来直接开始教程：

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>

2，初始化Artplayer播放器，设定参数

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,
});

3，增加一段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)}

//定义缓存
var cc = cookie.get(vid);
var ss = Math.ceil(cc)

4，把时间提示框容器和样式追加到页面中

$('#player').append('<div id="tips" class="hide"></div><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}#tips a{cursor:pointer;}</style>');

5，监听Artplayer的初始加载数据状态和播放时间变化

6，把事件提示框的关闭按钮绑定点击事件

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

$('#player').on("click",'#go',function(e){
	art.currentTime = ss;
	art.play();
	$('#tips').addClass("hide")
});