JavaScript&&Ajax加载视频

本篇章记录【JavaScript&&Ajax】获取视频的完整Url地址进行播放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../jquery-2.1.4.min.js"></script>
	</head>
	<body>
		<video id="myvideo" width="100%" height="auto" style="display: none; " 
			muted>
			<!-- 加muted 是为了可以实现自动播放  -->
			你的浏览器不支持HTML5播放此视频
			<span style="white-space: pre"></span>
			<!-- 支持播放的文件格式 -->
			<source src="" type='video/mp4' />
		</video>
	</body>
</html>
<script>
	var vList = [];
	var video = document.getElementById("myvideo");
	$(document).ready(function() {
		$.ajax({
			url: "接口地址",
			data: {},//参数
			caches: false,
			async: true,
			type: "POST",
			success: function(data) {
				console.log(data);
				if (data.Data.length != 0) {
					document.getElementById('myvideo1').style.display = ''; //播放器
					for (var i = 0; i < data.Data.length; i++) {
						vList.push('视频完整路径');
					}
					var vLen = vList.length;
					var curr = 0;
					video.src = vList[curr];
					video.load();
					video.play();
					curr++;
					if (curr >= vLen) {
						curr = 0; //重新循环播放
					}
					video.addEventListener('ended', function() {
						video.src = vList[curr];
						video.load();
						video.play();
						curr++;
						if (curr >= vLen) {
							curr = 0; //重新循环播放	
						}
					});
				} else {
					document.getElementById('myvideo').style.display = 'none'; //播放器

				}
			}
		});

	});
</script>

 

posted @ 2025-06-10 16:29  小鱼记忆  阅读(8)  评论(0)    收藏  举报