使用MP4视频格式链接地址的自适应视频弹窗实现方案HTML代码
以下是使用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>