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

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

于 2020-05-10 16:01:04 发布

阅读量1.6k

点赞数

分类专栏： HTML JavaScript 前端文章标签： html javascript web 视频处理网页设计

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

版权

JavaScript 同时被 3 个专栏收录

34 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

HTML

13 篇文章

订阅专栏

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