2026-06-22 16:23:10 +08:00
|
|
|
{{/*
|
|
|
|
|
Render hook for HTML video tags in Markdown
|
|
|
|
|
*/}}
|
2026-06-22 17:15:55 +08:00
|
|
|
<div class="video-wrap">
|
|
|
|
|
<figure class="video-player" onclick="toggleVideo(this)">
|
2026-06-22 16:23:10 +08:00
|
|
|
<video
|
|
|
|
|
preload="metadata"
|
|
|
|
|
playsinline
|
|
|
|
|
webkit-playsinline
|
|
|
|
|
{{ with .Attributes.poster }}poster="{{ . }}"{{ end }}
|
|
|
|
|
>
|
|
|
|
|
<source src="{{ .Destination | safeURL }}" type="{{ .MediaType.Type }}">
|
|
|
|
|
</video>
|
2026-06-22 17:15:55 +08:00
|
|
|
<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>
|
2026-06-22 16:23:10 +08:00
|
|
|
{{ with .Text }}
|
|
|
|
|
<figcaption class="video-caption">{{ . }}</figcaption>
|
|
|
|
|
{{ end }}
|
2026-06-22 17:15:55 +08:00
|
|
|
</div>
|
