video标签实现多个视频循环播放

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="UTF-8">
	<title>视频合并</title>
</head>
 
<body>
	<video controls="controls" id="video">您的浏览器不支持播放该视频!</video>
	<script type="text/javascript">
		let vAddrBefore = 'videos/G.E.M.邓紫棋-倒数 ';
		let vAddrAfter = '.webm';
		let vList = [
			'00_00_00-00_00_48',
			'00_00_48-00_01_36',
			'00_01_36-00_02_24',
			'00_02_24-00_03_12',
			'00_03_12-00_04_02'
		]; // 初始化播放列表
		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.load();
			video.play();
			if (curr >= vLen) curr = 0; //重新循环播放
		}
		video.addEventListener('ended', function () {
			play();
		});                       
	</script>
</body>
 
</html>

 


版权声明:本文为qq_26069551原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。