以下是使用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>
