以下是使用MP4视频格式链接地址的自适应视频弹窗实现方案：
视频弹窗播放器
使用原生MP4视频格式链接，直接通过HTML5 video元素播放
响应式设计适配不同屏幕尺寸，16:9视频比例保持不变
底部视频列表可横向滚动，点击缩略图切换不同视频
渐变色彩滚动条和悬停动画增强用户体验
关闭按钮位于弹窗右上角，点击遮罩层也可关闭
完全基于HTML5+CSS3+JavaScript实现，无外部依赖
替换视频链接说明：
修改video-thumbnail元素的onclick属性中的MP4链接
更新img的src属性为对应视频缩略图
修改video-title内容为实际视频标题
主视频播放器会自动加载点击的视频源
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP4视频弹窗播放器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f5f5f5;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.open-btn {
padding: 12px 24px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.open-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
display: flex;
opacity: 1;
}
.modal-container {
background-color: #1a1a1a;
border-radius: 12px;
width: 90%;
max-width: 1000px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
position: relative;
}
.video-container {
width: 100%;
padding-bottom: 56.25%; /* 16:9 宽高比 */
position: relative;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
}
.close-btn {
position: absolute;
top: -15px;
right: -15px;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #ff4e50, #f9d423);
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
display: flex;
justify-content: center;
align-items: center;
}
.close-btn:hover {
transform: scale(1.1);
}
.video-list {
display: flex;
padding: 15px;
overflow-x: auto;
gap: 15px;
background-color: #2a2a2a;
scrollbar-width: thin;
scrollbar-color: #6e8efb #2a2a2a;
}
.video-list::-webkit-scrollbar {
height: 8px;
}
.video-list::-webkit-scrollbar-track {
background: #2a2a2a;
border-radius: 10px;
}
.video-list::-webkit-scrollbar-thumb {
background: linear-gradient(to right, #6e8efb, #a777e3);
border-radius: 10px;
}
.video-thumbnail {
min-width: 120px;
height: 80px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease;
position: relative;
}
.video-thumbnail:hover {
transform: scale(1.05);
}
.video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: white;
padding: 5px;
font-size: 0.8rem;
text-align: center;
}
@media (max-width: 768px) {
.modal-container {
width: 95%;
}
.video-thumbnail {
min-width: 100px;
height: 70px;
}
}
</style>
</head>
<body>
<button class="open-btn" id="openModalBtn">
<i class="fas fa-play"></i> 播放视频
</button>
<div class="modal-overlay" id="modalOverlay">
<div class="modal-container">
<button class="close-btn" id="closeModalBtn">
<i class="fas fa-times"></i>
</button>
<div class="video-container">
<video id="mainVideo" controls>
<!-- 默认视频源 -->
<source src="https://example.com/sample.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>
<div class="video-list">
<!-- 视频1 -->
<div class="video-thumbnail" onclick="playVideo('https://example.com/video1.mp4', '视频标题1')">
<img src="https://picsum.photos/200/150?random=1" alt="视频1缩略图">
<div class="video-title">视频标题1</div>
</div>
<!-- 视频2 -->
<div class="video-thumbnail" onclick="playVideo('https://example.com/video2.mp4', '视频标题2')">
<img src="https://picsum.photos/200/150?random=2" alt="视频2缩略图">
<div class="video-title">视频标题2</div>
</div>
<!-- 视频3 -->
<div class="video-thumbnail" onclick="playVideo('https://example.com/video3.mp4', '视频标题3')">
<img src="https://picsum.photos/200/150?random=3" alt="视频3缩略图">
<div class="video-title">视频标题3</div>
</div>
<!-- 视频4 -->
<div class="video-thumbnail" onclick="playVideo('https://example.com/video4.mp4', '视频标题4')">
<img src="https://picsum.photos/200/150?random=4" alt="视频4缩略图">
<div class="video-title">视频标题4</div>
</div>
</div>
</div>
</div>
<script>
const modalOverlay = document.getElementById('modalOverlay');
const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const mainVideo = document.getElementById('mainVideo');
// 打开弹窗
openModalBtn.addEventListener('click', () => {
modalOverlay.classList.add('active');
// 自动播放第一个视频
const firstVideo = document.querySelector('.video-thumbnail');
if(firstVideo) firstVideo.click();
});
// 关闭弹窗
closeModalBtn.addEventListener('click', () => {
modalOverlay.classList.remove('active');
mainVideo.pause();
});
// 播放指定视频
function playVideo(videoUrl, videoTitle) {
mainVideo.src = videoUrl;
mainVideo.load();
mainVideo.play();
// 更新视频标题（如果有需要可以显示在界面上）
console.log('正在播放:', videoTitle);
}
// 点击遮罩层关闭弹窗
modalOverlay.addEventListener('click', (e) => {
if(e.target === modalOverlay) {
modalOverlay.classList.remove('active');
mainVideo.pause();
}
});
</script>
</body>
</html>