1623

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 }}