写一个在线轮播播放视频的网页
时间: 2023-12-15 15:03:14 浏览: 25
好的,下面是一个简单的在线轮播播放视频的网页的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>在线轮播播放视频</title>
<style>
.container {
width: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.video {
width: 600px;
height: 400px;
margin: 20px;
position: relative;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.controls {
display: flex;
justify-content: center;
margin-top: 10px;
}
.btn {
border: none;
background-color: #ccc;
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
}
.btn.active {
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="video">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
<div class="controls">
<button class="btn active" data-video-id="VIDEO_ID">视频1</button>
<button class="btn" data-video-id="VIDEO_ID">视频2</button>
<button class="btn" data-video-id="VIDEO_ID">视频3</button>
<button class="btn" data-video-id="VIDEO_ID">视频4</button>
</div>
</div>
<script>
// 获取所有视频按钮
let btns = document.querySelectorAll('.btn');
// 获取视频容器
let video = document.querySelector('.video iframe');
// 给每个按钮添加点击事件
btns.forEach(btn => {
btn.addEventListener('click', function() {
// 移除所有按钮的 active 样式
btns.forEach(b => b.classList.remove('active'));
// 给当前按钮添加 active 样式
this.classList.add('active');
// 获取当前按钮对应的视频 ID
let videoId = this.getAttribute('data-video-id');
// 更新视频 URL
video.src = `https://www.youtube.com/embed/${videoId}`;
});
});
</script>
</body>
</html>
```
上面的代码使用了 YouTube 的 iframe 播放器来播放视频,你需要将代码中的 VIDEO_ID 替换为你自己的视频 ID。另外,如果你想使用其他视频平台的播放器,你需要根据其 API 进行相应的修改。