HTML5 中 如何使用JS、 jquery 循环播放多个视频源
warning:
这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。
在HTML5中，可以使用<video>元素来嵌入视频，并利用JavaScript或jQuery来循环播放不同的视频源。以下是一个简单的例子，展示了如何使用jQuery来循环播放多个视频源：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Loop Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
$(document).ready(function(){
var videos = [
"video1.mp4",
"video2.mp4",
"video3.mp4"
// 添加更多视频源
];
var currentVideoIndex = 0;
$('#myVideo').on('ended', function() {
currentVideoIndex = (currentVideoIndex + 1) % videos.length;
$(this).attr('src', videos[currentVideoIndex]);
$(this).load();
$(this).play();
});
$('#myVideo').play();
});
</script>
</body>
</html>在这个例子中，我们首先定义了一个视频源数组videos，包含了所有要播放的视频文件路径。然后，我们监听视频播放结束的事件，在该事件发生时，我们计算下一个视频源的索引，并更新<video>元素的src属性，加载新视频，然后播放它。通过这种方式，视频会循环播放，实现了多个视频源的循环播放。
评论已关闭