124 lines
4.0 KiB
HTML
124 lines
4.0 KiB
HTML
{{/*
|
|
视频嵌入 shortcode（简约风格）
|
|
用法：
|
|
{{< video src="xxx.mp4" >}}
|
|
{{< video src="xxx.mp4" poster="cover.jpg" caption="说明" >}}
|
|
{{< bilibili BV1xx411c7mD >}}
|
|
{{< youtube dQw4w9WgXcQ >}}
|
|
*/}}
|
|
|
|
{{ if .Get "bvid" | or (.Get 0) }}
|
|
{{/* Bilibili */}}
|
|
{{ $bvid := .Get "bvid" | default (.Get 0) }}
|
|
<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"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
{{ else if .Get "id" | or (and (.Get 0) (not (.Get "src"))) }}
|
|
{{/* YouTube */}}
|
|
{{ $id := .Get "id" | default (.Get 0) }}
|
|
<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"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
{{ else }}
|
|
{{/* 本地/外部视频 */}}
|
|
{{ $src := .Get "src" }}
|
|
{{ $poster := .Get "poster" }}
|
|
{{ $caption := .Get "caption" }}
|
|
{{ $loop := .Get "loop" | default "false" }}
|
|
{{ $muted := .Get "muted" | default "false" }}
|
|
{{ $isGifMode := or (eq $loop "true") (eq $muted "true") }}
|
|
{{ $videoSrc := $src }}
|
|
{{ if not (hasPrefix $src "http") }}
|
|
{{ $videoSrc = printf "/%s/%s" .Page.Slug $src }}
|
|
{{ end }}
|
|
|
|
<div class="video-wrap">
|
|
<figure class="video-player gif-mode">
|
|
<video
|
|
preload="auto"
|
|
playsinline
|
|
webkit-playsinline
|
|
loop
|
|
muted
|
|
autoplay
|
|
{{ with $poster }}poster="{{ . }}"{{ end }}
|
|
>
|
|
<source src="{{ $videoSrc }}">
|
|
</video>
|
|
</figure>
|
|
{{ with $caption }}
|
|
<figcaption class="video-caption">{{ . }}</figcaption>
|
|
{{ end }}
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var v = document.currentScript.previousElementSibling.querySelector('video');
|
|
if (v) { v.muted = true; v.play().catch(function(){}); }
|
|
})();
|
|
</script>
|
|
{{ 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>
|