我們可以將按鈕統一成 openButton，並在 JavaScript 中處理多個按鈕的點擊事件，以動態地設置影片路徑。以下是程式碼範例：
<!DOCTYPE html>
<html>
<head>
<title>燈箱播放 MP4 影片</title>
<style>
/* 燈箱背景 */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
/* 影片容器 */
.video-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 關閉按鈕 */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 按鈕 -->
<button class="openButton" data-video-path="video1.mp4">影片 1</button>
<button class="openButton" data-video-path="video2.mp4">影片 2</button>
<!-- 燈箱 -->
<div class="lightbox" id="lightbox">
<div class="video-container">
<video controls width="800" height="450" autoplay id="videoPlayer">
<source src="" type="video/mp4">
您的瀏覽器不支援播放此影片。
</video>
<span class="close-btn" id="closeButton">關閉</span>
</div>
</div>
<script>
// JavaScript 部分
// 獲取按鈕和燈箱元素
const openButtons = document.querySelectorAll('.openButton');
const lightbox = document.getElementById('lightbox');
const videoPlayer = document.getElementById('videoPlayer');
const closeButton = document.getElementById('closeButton');
// 當按鈕被點擊時，顯示燈箱並設置影片路徑
openButtons.forEach(button => {
button.addEventListener('click', () => {
lightbox.style.display = 'block';
videoPlayer.src = button.getAttribute('data-video-path');
videoPlayer.load();
});
});
// 當關閉按鈕被點擊時，隱藏燈箱
closeButton.addEventListener('click', () => {
lightbox.style.display = 'none';
// 暫停影片播放，如果希望影片在關閉燈箱時停止播放，可以加上下面這行
videoPlayer.pause();
});
</script>
</body>
</html>
現在，我們使用了 querySelectorAll 方法來選取所有具有 openButton class 的按鈕元素，並使用 forEach 迴圈為每個按鈕添加點擊事件監聽器。當任何一個按鈕被點擊時，我們都會根據該按鈕的 data-video-path 屬性來設置影片路徑，並顯示燈箱播放該影片。這樣，您可以透過 data-video-path 屬性在按鈕上輕鬆地指定不同的影片路徑。