videojs播放器增加一个带时间提示框的记忆播放功能

Videojs 是一款为 HTML5 世界从头做起的网络视频播放器。它支持 HTML5 视频和媒体源扩展，以及 YouTube 和 Vimeo 等其他播放技术（通过plugins）。它支持在台式机和移动设备上播放视频。作为一款被广泛应用的H5播放器，记忆播放功能必不可少，今天我们就来给Videojs播放器增加这个带时间提示框的记忆播放功能。

首先在页面的video元素中动态添加一个提示框元素:

<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>

$('.video-js').prepend('<div id="tips" class="hide"></div>');

然后在Videojs参数中加入监听播放器载入数据和播放时间变化参数:

//CDN静态库引用
<link rel="stylesheet" href="https://cdn.staticfile.net/video.js/7.7.1/video-js.min.CSS">
<script type="text/JavaScript" src="https://cdn.staticfile.net/video.js/7.7.1/video.min.js" charset="utf-8"></script>

<video id="player" webkit-playsinline="true" playsinline="true" class="video-js vjs-default-skin vjs-big-play-centered" poster="" width="100%" height="100%"></video>

追加时间框元素点击事件:

$('.video-js').on("click",'#xx',function(e){
	player.currentTime(0);
	player.play();
	$('#tips').addClass("hide")
});

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

再加上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)}

这样Videojs播放器带时间提示框的记忆播放功能就添加完成了