blog/themes/Ying/layouts/shortcodes/video.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>