compile

content/music/Choir_show/index.md

@@ -3,47 +3,148 @@ title: 海淀区合唱团表演
 date: "2025-12-10"
 ---
 
-<div class="video-container">
+<div class="lazy-video" data-src="choir_show.mp4">
-  <video 
+  <!-- 预览图 -->
-    controls 
+  <div class="video-preview" onclick="loadAndPlay(this)">
-    preload="metadata"
+    <img src="video-thumbnail.jpg" alt="视频预览" class="preview-image">
-    poster="/path/to/poster.jpg" <!-- 可选：视频封面 -->
+    <div class="play-button">▶</div>
-    width="100%"
+    <div class="video-info-overlay">
-    style="border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+      <span>点击播放视频</span>
+      <small>时长: 3:45</small>
+    </div>
+  </div>
   
-    <source src="choir_show.mp4" type="video/mp4">
+  <!-- 视频播放器（初始隐藏） -->
-    
+  <div class="video-player" style="display: none;">
-    <!-- 浏览器不支持时的备选方案 -->
+    <video controls>
-    <p>您的浏览器不支持 HTML5 视频。请
+      <source src="" type="video/mp4">
-      <a href="choir_show.mp4">下载视频</a>
+    </video>
-    </p>
+    <button class="close-video" onclick="closeVideo(this)">✕</button>
-  </video>
-  
-  <div class="video-caption">
-    <p>合唱团表演视频 | 2023年音乐会</p>
   </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>
-.video-container {
+.lazy-video {
   max-width: 800px;
   margin: 2rem auto;
 }
 
-video {
+.video-preview {
-  display: block;
+  position: relative;
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
   background: #000;
+  aspect-ratio: 16/9;
 }
 
-.video-caption {
+.preview-image {
-  text-align: center;
+  width: 100%;
-  margin-top: 10px;
+  height: 100%;
-  color: #666;
+  object-fit: cover;
-  font-size: 0.9em;
+  opacity: 0.8;
+  transition: opacity 0.3s;
 }
 
-/* 深色模式适配 */
+.video-preview:hover .preview-image {
-[data-darkmode] video {
+  opacity: 0.6;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.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>