151 lines
3.1 KiB
Markdown
151 lines
3.1 KiB
Markdown
---
|
|
title: 海淀区合唱团表演
|
|
date: "2025-12-10"
|
|
---
|
|
|
|
<div class="lazy-video" data-src="choir_show.mp4">
|
|
<!-- 预览图 -->
|
|
<div class="video-preview" onclick="loadAndPlay(this)">
|
|
<img src="video-thumbnail.jpg" alt="视频预览" class="preview-image">
|
|
<div class="play-button">▶</div>
|
|
<div class="video-info-overlay">
|
|
<span>点击播放视频</span>
|
|
<small>时长: 3:45</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 视频播放器（初始隐藏） -->
|
|
<div class="video-player" style="display: none;">
|
|
<video controls>
|
|
<source src="" type="video/mp4">
|
|
</video>
|
|
<button class="close-video" onclick="closeVideo(this)">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|