title, date
| title |
date |
| 海淀区合唱团表演 |
2025-12-10 |
▶
点击播放视频
时长: 3:45
✕
<script>
function loadAndPlay(element) {
const container = element.closest('.lazy-video');
const videoSrc = container.getAttribute('data-src');
const preview = container.querySelector('.video-preview');
const player = container.querySelector('.video-player');
const video = player.querySelector('video');
const source = video.querySelector('source');
// 设置视频源
source.src = videoSrc;
video.load();
// 切换显示
preview.style.display = 'none';
player.style.display = 'block';
// 开始播放
video.play();
}
function closeVideo(button) {
const player = button.closest('.video-player');
const container = player.closest('.lazy-video');
const preview = container.querySelector('.video-preview');
const video = player.querySelector('video');
// 停止播放
video.pause();
video.currentTime = 0;
// 切换显示
player.style.display = 'none';
preview.style.display = 'block';
}
</script>
<style>
.lazy-video {
max-width: 800px;
margin: 2rem auto;
}
.video-preview {
position: relative;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
background: #000;
aspect-ratio: 16/9;
}
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
transition: opacity 0.3s;
}
.video-preview:hover .preview-image {
opacity: 0.6;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #007bff;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.video-info-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.video-player {
position: relative;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.video-player video {
width: 100%;
height: auto;
max-height: 600px;
display: block;
}
.close-video {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.7);
color: white;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
