Plyr - 轻量好看的HTML5播放器增加带提示框记忆播放功能

Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。支持自定义的播放控制和 WebVTT 字幕。Plyr还是一款非常轻量化、UI非常好看的经典H5播放器，得到非常多人的青睐！今天做一期给Plyr播放器增加带提示框记忆播放功能的教程：

1，引入Plyr和JQuery静态CDN

<link rel="stylesheet" href="https://cdn.staticfile.org/plyr/3.6.8/plyr.min.CSS" />
<script type="text/JavaScript" src="https://cdn.staticfile.org/plyr/3.6.8/plyr.min.js"></script>
<script type="text/JavaScript" src="https://cdn.staticfile.org/JQuery/3.4.1/jquery.min.js"></script>

2，初始化Plyr播放器

<div id="player"><video id="video" controls crossorigin playsinline src="https://www.18ma.cn/static/demo.mp4" poster="https://www.18ma.cn/static/demo.jpg"></video></div>

...

//视频地址
const source = document.getElementById("video").src;
const video = document.querySelector('video');
const player = new Plyr(video, {
	autoplay: false,
	volume: 1,
	speed: { 
		selected: 1, 
		options: [0.5, 1, 1.5, 2] 
	},
});

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(source);
var ck = Math.ceil(cc)

4，追加记忆播放提示框容器和样式

$('.plyr').append('<div id="tips" class="hide"></div><style type="text/CSS">#tips{position:absolute; z-index:209910539; right:2%; bottom:10%; background: #000000a6; font-size:15px; color:#FFF; padding:8px; border-radius:4px;}#tips a,#ref{cursor:pointer}#go{color: #66CCCC}.hide{display:none}#ref{position:absolute; z-index:209910539; right:2%; bottom:48%; background: #02886f; font-size:18px; color:#FFF; padding:8px; border-radius:4px;}</style>');

5，对Plyr播放器进行监听，在启动读取数据时和播放时间发生变化时进行相关执行

好了，Plyr播放器的记忆播放功能已经增加。