html 实现video播放器连播
时间: 2023-10-14 18:20:03 浏览: 25
要实现 HTML 中的 video 播放器连播,你需要使用 JavaScript 来控制视频的播放。以下是一个基本的示例代码,你需要根据你的具体需求做出一些修改。
```html
<!DOCTYPE html>
<html>
<head>
<title>Video Player</title>
</head>
<body>
<video id="my-video" width="640" height="360">
<source src="video1.mp4" type="video/mp4">
<source src="video2.mp4" type="video/mp4">
<source src="video3.mp4" type="video/mp4">
<source src="video4.mp4" type="video/mp4">
</video>
<button onclick="playNextVideo()">Play Next Video</button>
<script>
var videoIndex = 0;
var videoPlayer = document.getElementById("my-video");
var videos = videoPlayer.getElementsByTagName("source");
function playNextVideo() {
videoIndex++;
if (videoIndex >= videos.length) {
videoIndex = 0;
}
videoPlayer.src = videos[videoIndex].src;
videoPlayer.load();
videoPlayer.play();
}
</script>
</body>
</html>
```
在上面的示例中,我们定义了一个包含多个视频源的 video 元素,并且添加了一个按钮来触发播放下一个视频的函数 `playNextVideo()`。该函数会自动更新视频源并开始播放下一个视频。你可以通过修改 `videos` 数组来添加或移除视频源。