帮我写一个html,视频引流网页,点击就可以更换视频,每人五次次数
时间: 2023-02-22 09:32:39 浏览: 102
简单的实现视频流自换
3星 · 编辑精心推荐
以下是一个简单的HTML代码,实现了你描述的要求:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频引流网页</title>
</head>
<body>
<h1>视频引流网页</h1>
<p>点击下面的按钮更换视频(每人五次)</p>
<video id="videoPlayer" width="400" height="300" controls>
<source src="video1.mp4" type="video/mp4">
</video>
<br>
<button id="changeVideoBtn">更换视频</button>
<script>
var changeVideoBtn = document.getElementById("changeVideoBtn");
var videoPlayer = document.getElementById("videoPlayer");
var videoIndex = 1;
var maxVideoIndex = 5;
changeVideoBtn.addEventListener("click", function() {
if (videoIndex >= maxVideoIndex) {
alert("更换次数已经用完了!");
} else {
videoIndex++;
videoPlayer.src = "video" + videoIndex + ".mp4";
videoPlayer.load();
}
});
</script>
</body>
</html>
```
该代码使用了HTML的`video`标签和JavaScript代码来实现视频的播放和更换功能。如果需要更换视频,请替换代码中的`video1.mp4`和`video2.mp4`等视频文件路径。
阅读全文