html播放器缓存编写

最新推荐文章于 2023-06-21 00:07:17 发布

٩(⁎ ́ი ̀⁎)۶:.✧

最新推荐文章于 2023-06-21 00:07:17 发布

阅读量389

点赞数

分类专栏：缓存预加载网页优化文章标签：缓存视频处理网络网络通信网络优化

本文链接：https://blog.csdn.net/qq_26069551/article/details/106059050

版权

缓存同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

预加载

1 篇文章 0 订阅

订阅专栏

网页优化

1 篇文章 0 订阅

订阅专栏

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

٩(⁎ ́ი ̀⁎)۶:.✧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html播放器缓存编写

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>视频缓存</title></head><body> <video controls="controls" id="video">您的浏览器不支持播放该视频！</video> <script type="text/javascript"> le.
复制链接

扫一扫

专栏目录