在同一个网页上实现不同的视频弹出式窗口可以通过以下步骤实现:
<div>
元素作为容器,并为其设置一个唯一的ID,以便后续操作。<div id="video-container"></div>
#video-container {
width: 400px;
height: 300px;
background-color: #f2f2f2;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
// 弹出视频窗口
function openVideo(url) {
var videoContainer = document.getElementById('video-container');
videoContainer.innerHTML = '<video src="' + url + '" controls autoplay></video>';
videoContainer.style.display = 'block';
}
// 关闭视频窗口
function closeVideo() {
var videoContainer = document.getElementById('video-container');
videoContainer.innerHTML = '';
videoContainer.style.display = 'none';
}
<button onclick="openVideo('video.mp4')">点击播放视频</button>
通过以上步骤,就可以在同一个网页上实现不同的视频弹出式窗口。每个视频窗口可以通过调用openVideo()
函数来弹出,通过调用closeVideo()
函数来关闭。你可以根据实际需求,修改样式和交互逻辑,以满足特定的设计要求。
注意:以上示例中的代码仅为演示目的,实际应用中可能需要根据具体情况进行适当的修改和优化。
领取专属 10元无门槛券
手把手带您无忧上云