1715

2026-06-22 17:15:55 +08:00
1 parent ad65bfbb4c
commit 0cc176e867
@@ -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>