<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频断点续播</title>
<script src="jquery-1.8.3.js"></script>
<script src="jquery.cookie.js"></script>
</head>
<body>
<div style="text-align:center">
<button class="playPause" >播放</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
/**
* @description: H5视频断点续播小案例
* @param {type}
* @return:
* @Author: 偻儸小卒[EdisonLiu_]
* @Date: 2020-01-14 09:40:05
*/
$(function(){
//做这个案例只是给各位老铁参考用的，具体实现还需要大家自己研究研究
$('.playPause').click(function(){
//从cookie中读取最后播放进度
var videl1_play_time=$.cookie('videl1_play_time')?$.cookie('videl1_play_time'):0;
console.log(videl1_play_time,$('#video1')[0].duration,( (parseFloat($('#video1')[0].duration)-parseFloat(videl1_play_time)) * 10 <=5 ) )
//如果已经播放完则从第0秒开始播放 否则从最后保存的位置开始播放
//能正常播放总时间和获取到的总时间会有一点点差异【不知道为什么】 这里按差值小于500毫秒算
if(videl1_play_time>0 && (parseFloat($('#video1')[0].duration)-parseFloat(videl1_play_time)) * 10 <=5 ){
$('#video1')[0].currentTime=0;
}else{
$('#video1')[0].currentTime=videl1_play_time;
}
//继续播放
$('#video1')[0].play();
//10毫秒存储一次当前进度[这个时间最好大一点点虽然是异步但是还是比较影响页面渲染的]
setInterval(function () {
if($('#video1')[0].currentTime !=$('#video1')[0].duration ){
$.cookie('videl1_play_time', $('#video1')[0].currentTime, { expires: 7 });
console.log($.cookie('videl1_play_time'));
console.log($('#video1')[0].currentTime);
}
return false;
}, 10);
})
})
</script>
</body>
</html>
