在联合图库中,当用户单击模式框的关闭按钮时停止视频播放的方法如下:
<video>
标签来嵌入视频文件。<div id="modal" class="modal">
<video id="video" src="video.mp4"></video>
<button id="closeBtn">关闭</button>
</div>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
border-radius: 5px;
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none;
}
.modal.show {
opacity: 1;
pointer-events: auto;
}
var modal = document.getElementById('modal');
var video = document.getElementById('video');
var closeBtn = document.getElementById('closeBtn');
closeBtn.addEventListener('click', function() {
video.pause(); // 停止视频播放
modal.classList.remove('show'); // 隐藏模式框
});
// 显示模式框和播放视频的函数
function showModal() {
modal.classList.add('show');
video.play();
}
showModal()
函数来显示模式框和开始视频播放。var thumbnail = document.getElementById('thumbnail');
thumbnail.addEventListener('click', function() {
showModal();
});
通过以上步骤,当用户单击模式框中的关闭按钮时,视频播放将会停止。请注意,这只是一个基本的实现示例,你可以根据具体的需求进行定制和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云