帮我写一个html网站弹窗视频播发器,要那种渐显的那种,把css写在html里面.弹窗视频播放器要兼容移动PC端
时间: 2024-03-03 17:52:07 浏览: 18
好的,以下是一个简单的HTML网站弹窗视频播放器,可以兼容移动PC端。
```html
<!DOCTYPE html>
<html>
<head>
<title>弹窗视频播放器</title>
<style>
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
opacity: 0;
transition: opacity 0.5s ease-in-out;
display: none;
}
.popup.show {
display: block;
opacity: 1;
}
.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.popup .content video {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
.close {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="openPopup()">点击播放视频</button>
<div class="popup" id="popup">
<div class="content">
<video src="video.mp4" controls autoplay></video>
<div class="close" onclick="closePopup()">×</div>
</div>
</div>
<script>
function openPopup() {
document.getElementById("popup").classList.add("show");
}
function closePopup() {
document.getElementById("popup").classList.remove("show");
}
</script>
</body>
</html>
```
这个播放器使用了一个按钮来触发弹窗,当用户点击按钮时,弹窗会淡入并显示视频播放器。关闭按钮在视频播放器的顶部右侧,用户可以点击它来关闭视频播放器。
该播放器可以播放MP4格式的视频,并且在移动PC端都能正常显示。同时,播放器使用了CSS渐显效果以增强用户体验。