!DOCTYPE htmlhtmlheadstylehellopopup position absolute; top 0; left 0; width 100; height 100; display flex; justify-content center; align-items center; background-color rgba0 0 0 05; visibi
将下面的代码添加到上述代码中即可:
<div class="popup-overlay" id="popup-overlay" style="display: none;">
<div class="popup" onclick="event.stopPropagation();">
<!-- 弹窗内容 -->
<video id="my-video" src="" playsinline style='width: 100%;position: absolute;top: 0;left: 0;'></video>
<script>
var videos = [
'video/mmexport1691982171410.mp4',
'video/mmexport1691995122930.mp4',
'video/2023091222224584D7ABBC30B4AE2873E2.mp4',
'video/202309122217516BDD53A9D4ED7F1A9657.mp4'
];
var videoIndex = 0;
var video = document.getElementById('my-video');
var playButton = document.getElementById('play-button');
var popupOverlay = document.getElementById('popup-overlay');
function toggleVideoPlayback() {
if (video.paused) {
video.src = videos[videoIndex];
video.play();
popupOverlay.style.display = 'block';
} else {
video.pause();
popupOverlay.style.display = 'none';
}
}
// 监听视频结束事件
video.addEventListener('ended', function() {
videoIndex++;
if (videoIndex >= videos.length) {
videoIndex = 0; // 循环播放
}
video.src = videos[videoIndex];
video.play();
});
function closePopup() {
video.pause();
popupOverlay.style.display = 'none';
}
</script>
<img src="image/logo.png" style="position: absolute;bottom: 50px;left: 24%;">
<a id="close-button" class="close-btn" onclick="toggleVideoPlayback()">关闭</a>
</div>
</div>
<a onclick="openPopup()" style="position: absolute;top: 0;right: 0;">打开弹窗</a>
<script>
var popupOverlay = document.getElementById('popup-overlay');
var popup = popupOverlay.querySelector('.popup');
function openPopup() {
popupOverlay.style.display = 'block';
document.body.classList.add('popup-open');
}
function closePopup() {
popupOverlay.style.display = 'none';
document.body.classList.remove('popup-open');
}
// 禁止弹窗外的点击事件冒泡到上层元素
popup.addEventListener('click', function(e) {
e.stopPropagation();
});
</script>
原文地址: https://www.cveoy.top/t/topic/i7oH 著作权归作者所有。请勿转载和采集!