DPlayer - 用Cookie增加带时间提示框的记忆播放功能

Dplayer是应用最广泛的H5播放器之一，具有轻量化，UI界面好看，轻松支持移动终端，使用简单容易上手等等优势特点，得到越来越多人的青睐和引用。今天我们来做一个用Cookie给Dplayer这款经典web播放器增加一个带时间提示框的记忆播放功能教程，废话不多说，直接看过程：

第一步

在页面引入DPlayer播放器CDN和HLS.js

<link rel="stylesheet" href="https://cdn.bootcdn.net/Ajax/libs/dplayer/1.25.0/DPlayer.min.CSS">
<script type="text/JavaScript" src="https://cdn.staticfile.org/HLS.js/1.2.7/hls.min.js"></script>
<script type="text/JavaScript" src="https://cdn.bootcdn.net/Ajax/libs/dplayer/1.25.0/DPlayer.min.js" charset="utf-8"></script>

...

<div id="player"></div>

第二步

在DPlayer播放器参数之前定义一些Cookie和时间转换参数

//视频URL
var vid = "<?PHP echo $_GET['url'];?>";

//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);

var dp = new DPlayer({
    container: document.getElementById('player'),
    autoplay: true,//自动播放
    live: false,//直播模式
    loop: false,//循环播放
    screenshot: true,//开启截图
    theme: '#FF9900',//主题配色
    preload: 'auto',//视频预加载
    hotkey: true,//热键控制
    airplay: false,//在 Safari 中开启 AirPlay
    volume: 0.7,//默认音量
    lang: 'zh-cn',//语言
    mutex: true,//播放器互斥
    video: {
        url: vid,//视频地址
        //type: 'auto',//视频类型
        thumbnails: '',//缩列图
    },
});

第三步

在javascript代码中追加一个时间提示框元素和样式

$('#player').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{cursor:pointer}#go{color: #66CCCC}.hide{display:none}</style>');

第四步

给DPlayer播放器增加启动时加载数据监听和执行，再增加一个播放时间变化的监听和执行

第五步

把时间提示框里的两个按钮点击事件加上

$('#tips').on("click",'#xx',function(e){
	dp.play();
	$('#tips').addClass("hide")
});
$('#tips').on("click",'#go',function(e){
	dp.seek(ck);
	dp.play();
	$('#tips').addClass("hide")
});

好了，大功告成，这样就有了一个带时间提示框的记忆播放功能DPlayer播放器了。