From f00372d0a78a403e802ba38ad9ccbba2de231f05 Mon Sep 17 00:00:00 2001
From: Vaica <94612053+zqlit@users.noreply.github.com>
Date: Mon, 22 Jun 2026 17:15:55 +0800
Subject: [PATCH] 1715

---
 themes/Ying/assets/css/main.css               | 162 +++++++++++++-----
 .../_default/_markup/render-video.html        |  32 +++-
 themes/Ying/layouts/shortcodes/video.html     | 111 +++++++++---
 3 files changed, 233 insertions(+), 72 deletions(-)

diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css
index eb34eb31..333c1889 100644
--- a/themes/Ying/assets/css/main.css
+++ b/themes/Ying/assets/css/main.css
@@ -5708,62 +5708,157 @@ a.link-card:hover .link-card-arrow {
     color: var(--accent, #3b82f6) !important;
 }
 
-/* ==================== 视频样式 ==================== */
+/* ==================== 视频样式（简约风格） ==================== */
 
-.post-video-wrapper {
+.video-wrap {
     margin: 1.5rem 0;
+}
+
+.video-player {
+    position: relative;
+    width: 100%;
     border-radius: 12px;
     overflow: hidden;
     background: #000;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    margin: 0;
 }
 
-[data-theme="dark"] .post-video-wrapper {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-}
-
-.video-container {
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-}
-
-.video-container video {
+.video-player video {
     display: block;
     width: 100%;
     height: auto;
     max-height: 80vh;
-    border-radius: 12px;
-    outline: none;
+    object-fit: contain;
 }
 
-.video-container video::-webkit-media-controls-panel {
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
+.video-play-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 56px;
+    height: 56px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    transition: opacity 0.3s, transform 0.3s;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.video-play-icon svg {
+    width: 28px;
+    height: 28px;
+    margin-left: 3px;
+}
+
+.video-player.playing .video-play-icon {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+    pointer-events: none;
+}
+
+.video-player:hover .video-play-icon {
+    transform: translate(-50%, -50%) scale(1.08);
+}
+
+.video-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.video-player:hover .video-controls,
+.video-player.playing .video-controls {
+    opacity: 1;
+}
+
+.video-ctrl-btn {
+    background: none;
+    border: none;
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    opacity: 0.85;
+    transition: opacity 0.2s;
+}
+
+.video-ctrl-btn:hover {
+    opacity: 1;
+}
+
+.video-ctrl-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+.video-progress {
+    flex: 1;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+}
+
+.video-progress-bar {
+    height: 100%;
+    background: #fff;
+    border-radius: 2px;
+    width: 0;
+    transition: width 0.1s linear;
+}
+
+.video-time {
+    color: #fff;
+    font-size: 12px;
+    flex-shrink: 0;
+    min-width: 36px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
 }
 
 .video-caption {
-    padding: 0.75rem 1rem;
+    padding: 0.6rem 0;
     text-align: center;
-    font-size: 0.85rem;
-    color: #6b7280;
-    background: #f9fafb;
-    border-top: 1px solid #e5e7eb;
+    font-size: 0.82rem;
+    color: #9ca3af;
+}
+
+[data-theme="dark"] .video-player {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }
 
 [data-theme="dark"] .video-caption {
-    color: #9ca3af;
-    background: #1f2937;
-    border-top-color: #374151;
+    color: #6b7280;
 }
 
 /* Bilibili / YouTube 嵌入 */
 .video-embed {
     position: relative;
     width: 100%;
-    padding-bottom: 56.25%; /* 16:9 */
+    padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
     border-radius: 12px;
+    background: #000;
 }
 
 .video-embed iframe {
@@ -5775,16 +5870,3 @@ a.link-card:hover .link-card-arrow {
     border: none;
     border-radius: 12px;
 }
-
-/* 文章内直接写 <video> 标签的样式 */
-.post-content video {
-    display: block;
-    max-width: 100%;
-    margin: 1.5rem auto;
-    border-radius: 12px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-[data-theme="dark"] .post-content video {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-}
diff --git a/themes/Ying/layouts/_default/_markup/render-video.html b/themes/Ying/layouts/_default/_markup/render-video.html
index 3bd64371..1cebf2fb 100644
--- a/themes/Ying/layouts/_default/_markup/render-video.html
+++ b/themes/Ying/layouts/_default/_markup/render-video.html
@@ -1,22 +1,38 @@
 {{/*
   Render hook for HTML video tags in Markdown
-  让 Markdown 中的 <video> 标签自动包裹 figure 容器
 */}}
-<figure class="post-video-wrapper">
-  <div class="video-container">
+<div class="video-wrap">
+  <figure class="video-player" onclick="toggleVideo(this)">
     <video
-      controls
       preload="metadata"
       playsinline
       webkit-playsinline
       {{ with .Attributes.poster }}poster="{{ . }}"{{ end }}
-      {{ with .Attributes.class }}class="{{ . }}"{{ end }}
     >
       <source src="{{ .Destination | safeURL }}" type="{{ .MediaType.Type }}">
-      你的浏览器不支持视频播放。
     </video>
-  </div>
+    <div class="video-play-icon">
+      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+    </div>
+    <div class="video-controls">
+      <button class="video-ctrl-btn" onclick="event.stopPropagation(); togglePlay(this)">
+        <svg class="icon-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+        <svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+      </button>
+      <div class="video-progress" onclick="event.stopPropagation(); seekVideo(event, this)">
+        <div class="video-progress-bar"></div>
+      </div>
+      <span class="video-time">0:00</span>
+      <button class="video-ctrl-btn" onclick="event.stopPropagation(); toggleMute(this)">
+        <svg class="icon-unmute" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
+        <svg class="icon-mute" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>
+      </button>
+      <button class="video-ctrl-btn" onclick="event.stopPropagation(); fullscreenVideo(this)">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+      </button>
+    </div>
+  </figure>
   {{ with .Text }}
   <figcaption class="video-caption">{{ . }}</figcaption>
   {{ end }}
-</figure>
+</div>
diff --git a/themes/Ying/layouts/shortcodes/video.html b/themes/Ying/layouts/shortcodes/video.html
index 3009f88a..56bd7e90 100644
--- a/themes/Ying/layouts/shortcodes/video.html
+++ b/themes/Ying/layouts/shortcodes/video.html
@@ -1,39 +1,34 @@
 {{/*
-  视频嵌入 shortcode
+  视频嵌入 shortcode（简约风格）
   用法：
-    {{< video src="/video/example.mp4" >}}
-    {{< video src="https://example.com/video.mp4" poster="/image/poster.jpg" >}}
-    {{< video src="/video/example.mp4" caption="视频说明文字" >}}
+    {{< video src="xxx.mp4" >}}
+    {{< video src="xxx.mp4" poster="cover.jpg" caption="说明" >}}
     {{< bilibili BV1xx411c7mD >}}
     {{< youtube dQw4w9WgXcQ >}}
 */}}
 
 {{ if .Get "bvid" | or (.Get 0) }}
-  {{/* Bilibili 嵌入 */}}
+  {{/* Bilibili */}}
   {{ $bvid := .Get "bvid" | default (.Get 0) }}
-  <div class="post-video-wrapper">
-    <div class="video-embed bilibili-embed">
+  <div class="video-wrap">
+    <div class="video-embed">
       <iframe
         src="//player.bilibili.com/player.html?bvid={{ $bvid }}&high_quality=1&danmaku=0"
-        scrolling="no"
-        frameborder="0"
-        allowfullscreen="true"
-        loading="lazy"
+        scrolling="no" frameborder="0" allowfullscreen="true" loading="lazy"
       ></iframe>
     </div>
   </div>
 
 {{ else if .Get "id" | or (and (.Get 0) (not (.Get "src"))) }}
-  {{/* YouTube 嵌入 */}}
+  {{/* YouTube */}}
   {{ $id := .Get "id" | default (.Get 0) }}
-  <div class="post-video-wrapper">
-    <div class="video-embed youtube-embed">
+  <div class="video-wrap">
+    <div class="video-embed">
       <iframe
         src="https://www.youtube.com/embed/{{ $id }}"
         frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen="true"
-        loading="lazy"
+        allowfullscreen="true" loading="lazy"
       ></iframe>
     </div>
   </div>
@@ -43,26 +38,94 @@
   {{ $src := .Get "src" }}
   {{ $poster := .Get "poster" }}
   {{ $caption := .Get "caption" }}
-  {{/* 自动补全 Page Bundle 路径 */}}
   {{ $videoSrc := $src }}
   {{ if not (hasPrefix $src "http") }}
     {{ $videoSrc = printf "/%s/%s" .Page.Slug $src }}
   {{ end }}
-  <figure class="post-video-wrapper">
-    <div class="video-container">
+
+  <div class="video-wrap">
+    <figure class="video-player" onclick="toggleVideo(this)">
       <video
-        controls
         preload="metadata"
-        {{ with $poster }}poster="{{ . }}"{{ end }}
         playsinline
         webkit-playsinline
+        {{ with $poster }}poster="{{ . }}"{{ end }}
       >
         <source src="{{ $videoSrc }}">
-        你的浏览器不支持视频播放。
       </video>
-    </div>
+      <div class="video-play-icon">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+      </div>
+      <div class="video-controls">
+        <button class="video-ctrl-btn" onclick="event.stopPropagation(); togglePlay(this)">
+          <svg class="icon-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+          <svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+        </button>
+        <div class="video-progress" onclick="event.stopPropagation(); seekVideo(event, this)">
+          <div class="video-progress-bar"></div>
+        </div>
+        <span class="video-time">0:00</span>
+        <button class="video-ctrl-btn" onclick="event.stopPropagation(); toggleMute(this)">
+          <svg class="icon-unmute" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
+          <svg class="icon-mute" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>
+        </button>
+        <button class="video-ctrl-btn" onclick="event.stopPropagation(); fullscreenVideo(this)">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+        </button>
+      </div>
+    </figure>
     {{ with $caption }}
     <figcaption class="video-caption">{{ . }}</figcaption>
     {{ end }}
-  </figure>
+  </div>
 {{ end }}
+
+<script>
+function toggleVideo(el) {
+  var video = el.querySelector('video');
+  if (!video) return;
+  if (video.paused) { video.play(); el.classList.add('playing'); }
+  else { video.pause(); el.classList.remove('playing'); }
+}
+function togglePlay(btn) {
+  var video = btn.closest('.video-player').querySelector('video');
+  if (video.paused) { video.play(); btn.closest('.video-player').classList.add('playing'); }
+  else { video.pause(); btn.closest('.video-player').classList.remove('playing'); }
+}
+function toggleMute(btn) {
+  var video = btn.closest('.video-player').querySelector('video');
+  video.muted = !video.muted;
+  btn.querySelector('.icon-unmute').style.display = video.muted ? 'none' : '';
+  btn.querySelector('.icon-mute').style.display = video.muted ? '' : 'none';
+}
+function seekVideo(e, bar) {
+  var video = bar.closest('.video-player').querySelector('video');
+  var rect = bar.getBoundingClientRect();
+  video.currentTime = ((e.clientX - rect.left) / rect.width) * video.duration;
+}
+function fullscreenVideo(btn) {
+  var el = btn.closest('.video-player');
+  if (el.requestFullscreen) el.requestFullscreen();
+  else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
+}
+document.addEventListener('timeupdate', function(e) {
+  var video = e.target;
+  if (!video.closest) return;
+  var player = video.closest('.video-player');
+  if (!player) return;
+  var bar = player.querySelector('.video-progress-bar');
+  var time = player.querySelector('.video-time');
+  if (bar) bar.style.width = (video.currentTime / video.duration * 100) + '%';
+  if (time) {
+    var m = Math.floor(video.currentTime / 60);
+    var s = Math.floor(video.currentTime % 60);
+    time.textContent = m + ':' + (s < 10 ? '0' : '') + s;
+  }
+  var playIcon = player.querySelector('.icon-play');
+  var pauseIcon = player.querySelector('.icon-pause');
+  if (playIcon && pauseIcon) {
+    playIcon.style.display = video.paused ? '' : 'none';
+    pauseIcon.style.display = video.paused ? 'none' : '';
+  }
+}, true);
+</script>