MuiPlayer - 弹幕H5播放器增加带提示框记忆播放功能

MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。播放器的设计兼容了在 PC、Mobile 端运行，提供了 “移动端” 以及 “PC端” 两类扩展插件，因此你也可应用于在 Android、Ios 的 Webview 中使用。如果你的应用是运行在 HTML5 plus (opens new window)环境中，那么你使用该播放插件将会默认得到更多原生 api 的支持，例如播放控制设备音量、全屏时横竖屏播放、沉浸式播放等。你也可以使用原生与网页交互的方式来控制视频以及设备功能，MuiPlayer 提供了所有事件触发的回调函数，你需要在这里作一些自己的控制。

今天我们在做一期给Muiplayer播放器增加带提示框的记忆播放教程：

1，引入Muiplayer和JQuery静态文件

<script type="text/JavaScript" src="mui-player.min.js"></script>
<script type="text/JavaScript" src="https://cdn.staticfile.org/JQuery/3.4.1/jquery.min.js"></script>

2，在页面加上Cookie和时间转换代码

//视频URL
var vid = "https://www.18ma.cn/static/demo.M3U8";

//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 ck=cookie.get(vid);

3，在HTML页面追加提示框元素的样式

$('#player').prepend('<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>');

4，监听Muiplayer播放器状态，在播放器初始读取数据和播放时间发生变化时执行相应执行

到这里就已经完成了，Muiplayer已经具有记忆播放的功能了。