video循环播放队列多个视频

		<video id="myvideo" width="320" height="auto" controls="controls" muted>
			<!-- 加muted 是为了可以实现自动播放  -->
			你的浏览器不支持HTML5播放此视频
			<span style="white-space:pre"> </span><!-- 支持播放的文件格式 -->
			<source src="" type='video/mp4' />
		</video>
		<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
		<script type="text/javascript">
			var video = document.getElementById("myvideo");
			var vList = ['video/1.mp4', 'video/2.mp4', 'video/3.mp4', 'video/4.mp4']; // 相对路径  
			var vLen = vList.length;
			var curr = 0;
			$(document).ready(function() {
				play();
				video.addEventListener('ended', function() {  	//监听视频播放结束，自动播放下一个
					play();
				});
			});
			function play() {
				video.src = vList[curr];
				video.load();
				video.play();
				curr++;
				if (curr >= vLen) {
					curr = 0; //重新循环播放
				}
			}
		</script>

vue.js版

<div id="app">
			<video id="myvideo" width="600" height="400" controls="controls" muted >
				<!-- 加muted 是为了可以实现自动播放  -->
				你的浏览器不支持HTML5播放此视频
				<span style="white-space:pre"> </span><!-- 支持播放的文件格式 -->
				<source src="" type='video/mp4' />
			</video>
			<p><span>正在播放:</span>第{{video_num}}个视频</p>
			<p>{{video_src}}</p>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					 vList: ['video/1.mp4', 'video/2.mp4', 'video/3.mp4', 'video/4.mp4'], //要用相对路径 
					curr: 0,
					video_num: 0,
					video_src: ''
				},

				methods: {
					play() {
						var video = document.getElementById("myvideo");
						video.src = this.vList[this.curr];
						video.load();
						video.play();
						this.curr++;
						if (this.curr >= this.vList.length) {
							this.curr = 0; //重新循环播放
						}
						this.video_src = video.src
						this.video_num = this.curr
					}
				},
				mounted: function() {
					// $('#app').html('引用了jquery');
					// 	document.getElementById('myvideo').addEventListener('ended', () => {
					// 	this.play();
					// })
					//监听视频播放结束，自动播放下一个
					this.$nextTick(() => {
						document.getElementById('myvideo').addEventListener('ended', () => {
							this.play();
						})
					})
					this.play();
				}
			})
		</script>

从接口返回视频队列，循环播放并回调计费接口

		<div id="video-box">
			<video id="myvideo" width="800" height="600" controls="controls" muted="muted" src="" autopaly="autopaly">
				<!-- 加muted 是为了可以实现自动播放  -->
				你的浏览器不支持HTML5播放此视频
				<span style="white-space:pre"> </span>
				<!-- 支持播放的文件格式 -->
				<source src="" type='video/mp4' />
			</video>
			<p><span class="item">请求队列:</span>第<span id="list_num">0</span>次</p>
			<p><span class="item">此队播放:</span>第<span id="num_num">0</span>个视频(共<span id="list_length">0</span>)</p>
			<p></p>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
		<script type="text/javascript">
			var video = document.getElementById("myvideo");
			var vList = []; // 初始化播放列表，这里的url要用相对路径
			var vLen = vList.length;
			var curr = 0;
			var num = 0;
			var return_urlList = [];
			$(document).ready(function() {
				getList()
				let warn1 = setTimeout(() => {
					play();
					clearTimeout(warn1)
				}, 1000)
				video.addEventListener('ended', function() {
					play();
					console.log('end')
				});

			});
			function getList() {
				$.ajax({
					//请求方式
					type: "POST",
					//请求的媒体类型
					contentType: "application/x-www-form-urlencoded",
					//请求地址
					url: 'https://xxx.com',
					dataType: 'json', //预期的服务器响应的数据类型 
					//数据，json字符串
					data: {
					//参数
					},
					//请求成功
					success: function(res) {
					//---------------------------- 
						var arr = []
						for (var i = 0; i < res.data.data.length; i++) {
							arr.push(res.data.data[i].ad_pic)
							return_urlList.push(res.data.data[i].return_url)
						}
						vList = arr
						//接口为空半小时后再调
						if (res.data.data == []) {
							$('#list_length').html(0)
							let warn3 = setTimeout(() => {
								getList();
								clearTimeout(warn3)
							}, 108000)
						} else {
							$('#list_length').html(vList.length)
						}
					//-------------------- ----
					},
					error: function(err) {}
				});
				$('#list_num').html(num)
				num = num + 1
			};
			function play() {
				//回调后台
				$.ajax({
					type: 'GET',
					url: return_urlList[curr],
					dataType: 'json',
					success: function(res) {
				
					},
					error: function(err) { //失败的函数s
						//...
					}
				});
				var str = vList[curr];
				video.src = str;
				video.load();
				video.play();
				$('#num_num').html(curr + 1)
				curr++;
				if (curr >= vLen) {
					curr = 0; //重新循环播放
					getList()
				}
				console.log('play')
			}
		</script>