1623

themes/Ying/layouts/_default/_markup/render-video.html

@@ -0,0 +1,22 @@
+{{/*
+  Render hook for HTML video tags in Markdown
+  让 Markdown 中的 <video> 标签自动包裹 figure 容器
+*/}}
+<figure class="post-video-wrapper">
+  <div class="video-container">
+    <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>
+  {{ with .Text }}
+  <figcaption class="video-caption">{{ . }}</figcaption>
+  {{ end }}
+</figure>

themes/Ying/layouts/_default/single.html

@@ -35,8 +35,45 @@
             content.querySelectorAll('.post-video, .link-card').forEach(function(el) {
                 if (!el.hasAttribute('uk-scrollspy')) el.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-bottom-small; delay: 100');
             });
+            // 初始化视频播放器
+            initVideoPlayers();
         }
         document.addEventListener('DOMContentLoaded', initPostScrollspy);
+
+        // 视频 PJAX 适配
+        function initVideoPlayers() {
+            document.querySelectorAll('.post-content video, .post-video-wrapper video').forEach(function(video) {
+                // 暗黑模式下视频控件适配
+                if (document.documentElement.dataset.theme === 'dark') {
+                    video.style.filter = 'brightness(0.95)';
+                } else {
+                    video.style.filter = '';
+                }
+                // 确保不自动播放
+                video.removeAttribute('autoplay');
+                video.pause();
+            });
+            // 嵌入视频（B站/YouTube）在 PJAX 后重新加载
+            document.querySelectorAll('.video-embed iframe').forEach(function(iframe) {
+                var src = iframe.src;
+                if (src) {
+                    iframe.src = src; // 触发重新加载
+                }
+            });
+        }
+
+        // PJAX 导航前暂停所有视频
+        document.addEventListener('pjax:send', function() {
+            document.querySelectorAll('video').forEach(function(video) {
+                video.pause();
+                video.removeAttribute('autoplay');
+            });
+        });
+
+        // PJAX 加载完成后重新初始化
+        document.addEventListener('pjax:complete', function() {
+            setTimeout(initPostScrollspy, 100);
+        });
         </script>
 
 

themes/Ying/layouts/shortcodes/video.html

@@ -0,0 +1,63 @@
+{{/*
+  视频嵌入 shortcode
+  用法：
+    {{< video src="/video/example.mp4" >}}
+    {{< video src="https://example.com/video.mp4" poster="/image/poster.jpg" >}}
+    {{< video src="/video/example.mp4" caption="视频说明文字" >}}
+    {{< bilibili BV1xx411c7mD >}}
+    {{< youtube dQw4w9WgXcQ >}}
+*/}}
+
+{{ if .Get "bvid" | or (.Get 0) }}
+  {{/* Bilibili 嵌入 */}}
+  {{ $bvid := .Get "bvid" | default (.Get 0) }}
+  <div class="post-video-wrapper">
+    <div class="video-embed bilibili-embed">
+      <iframe
+        src="//player.bilibili.com/player.html?bvid={{ $bvid }}&high_quality=1&danmaku=0"
+        scrolling="no"
+        frameborder="0"
+        allowfullscreen="true"
+        loading="lazy"
+      ></iframe>
+    </div>
+  </div>
+
+{{ else if .Get "id" | or (and (.Get 0) (not (.Get "src"))) }}
+  {{/* YouTube 嵌入 */}}
+  {{ $id := .Get "id" | default (.Get 0) }}
+  <div class="post-video-wrapper">
+    <div class="video-embed youtube-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"
+      ></iframe>
+    </div>
+  </div>
+
+{{ else }}
+  {{/* 本地/外部视频 */}}
+  {{ $src := .Get "src" }}
+  {{ $poster := .Get "poster" }}
+  {{ $caption := .Get "caption" }}
+  <figure class="post-video-wrapper">
+    <div class="video-container">
+      <video
+        controls
+        preload="metadata"
+        {{ with $poster }}poster="{{ . }}"{{ end }}
+        playsinline
+        webkit-playsinline
+      >
+        <source src="{{ $src }}">
+        你的浏览器不支持视频播放。
+      </video>
+    </div>
+    {{ with $caption }}
+    <figcaption class="video-caption">{{ . }}</figcaption>
+    {{ end }}
+  </figure>
+{{ end }}