<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频缓存</title>
</head>
<body>
<video controls="controls" id="video">您的浏览器不支持播放该视频!</video>
<script type="text/javascript">
let vAddrBefore = 'https://clig.gitee.io/the-enchanting-phantom-';
let center = '-6/倩女幽魂·人间情 ';
let vAddrAfter = '.webm';
let num = null,middle = true,cache = false;
let vList = [
'1'+center+'00_00_00-00_03_13',
'1'+center+'00_03_13-00_06_26',
'1'+center+'00_06_26-00_09_39',
'1'+center+'00_09_39-00_12_52',
'1'+center+'00_12_52-00_16_05',
'2'+center+'00_16_05-00_19_18',
'2'+center+'00_19_18-00_22_31',
'2'+center+'00_22_31-00_25_44',
'2'+center+'00_25_44-00_28_57',
'2'+center+'00_28_57-00_32_10',
'3'+center+'00_32_10-00_35_23',
'3'+center+'00_35_23-00_38_36',
'3'+center+'00_38_36-00_41_49',
'3'+center+'00_41_49-00_45_02',
'3'+center+'00_45_02-00_48_15',
'4'+center+'00_48_15-00_51_28',
'4'+center+'00_51_28-00_54_41',
'4'+center+'00_54_41-00_57_54',
'4'+center+'00_57_54-01_01_07',
'4'+center+'01_01_07-01_04_20',
'5'+center+'01_04_20-01_07_33',
'5'+center+'01_07_33-01_10_46',
'5'+center+'01_10_46-01_13_59',
'5'+center+'01_13_59-01_17_12',
'5'+center+'01_17_12-01_20_25',
'6'+center+'01_20_25-01_23_38',
'6'+center+'01_23_38-01_26_51',
'6'+center+'01_26_51-01_30_04',
'6'+center+'01_30_04-01_33_17',
'6'+center+'01_33_17-01_36_36',
]; // 初始化播放列表
let vLen = vList.length; // 播放列表的长度
let curr = 0; // 当前播放的视频
let video = document.getElementById("video");
video.src = vAddrBefore+vList[curr]+vAddrAfter;
function play() {
++curr;
video.src = vAddrBefore+vList[curr]+vAddrAfter;
video.play();
if(curr >= vLen) curr = 0; //重新循环播放
}
video.addEventListener('ended', function(){
play();
if (cache) {
cache.remove();
middle = true;
}
});
video.addEventListener("progress", function() {
let progress = this.currentTime/this.duration;
if (progress > 0.6 && middle) {
middle = false;
cache = document.createElement('video');
cache.setAttribute('preload','auto');
cache.style.display = 'none';
curr < vLen ? num = curr+1 : num = 0;
let src = vAddrBefore+vList[num]+vAddrAfter;
cache.src = src;
cache.load();
}
});
</script>
</body>
</html>