From 11edca189059cf5bbe78443afbb191e740c6fa60 Mon Sep 17 00:00:00 2001
From: jeffreytse <jeffreytse.mail@gmail.com>
Date: Sat, 26 Jun 2021 12:05:19 +0800
Subject: feat: support video banner

---
 _includes/views/banner.html | 43 ++++++++++++++++++++++++++++++++++++++++---
 _includes/views/header.html |  2 +-
 2 files changed, 41 insertions(+), 4 deletions(-)

(limited to '_includes/views')

diff --git a/_includes/views/banner.html b/_includes/views/banner.html
index b852fb0..554a915 100644
--- a/_includes/views/banner.html
+++ b/_includes/views/banner.html
@@ -15,7 +15,7 @@
 
 {%- include functions.html func='get_banner' -%}
 
-{%- if banner_image -%}
+{%- if has_banner -%}
   {%- if banner_background -%}
   <style>
     html .page-banner {
@@ -65,8 +65,45 @@
   {%- endif -%}
   <section class="page-banner">
     <div class="page-banner-img">
-      <div style="background-image: url({{ banner_image }})"></div>
-      <img class="img-placeholder" src="{{ banner_image }}"></div>
+      {%- if banner_video -%}
+        <video
+          autoplay=""
+          poster="{{ banner_image }}"
+        >
+          <source src="{{ banner_video }}">
+        </video>
+        <script>
+          (function() {
+            var video = document.querySelector('.page-banner .page-banner-img > video');
+            var videoPlay = function() {
+              try {
+                video.play();
+              } catch (e) {
+                console.error(e);
+              }
+              window.removeEventListener('focus', videoPlay);
+            }
+
+            window.addEventListener('focus', videoPlay);
+
+            video.onloadstart = function() {
+              video.volume = {{ banner_volume }};
+              video.currentTime = {{ banner_start_at }};
+            }
+
+            video.onended = function() {
+              video.currentTime = {{ banner_start_at }};
+              video.volume = 0;
+            {%- if banner_loop -%}
+              video.play();
+            {%- endif -%}
+            }
+          })();
+        </script>
+      {%- else -%}
+        <div style="background-image: url({{ banner_image }})"></div>
+        <img class="img-placeholder" src="{{ banner_image }}">
+      {%- endif -%}
     </div>
     <div class="wrapper">
       <div class="page-banner-inner">
diff --git a/_includes/views/header.html b/_includes/views/header.html
index d8b43f4..169bf01 100644
--- a/_includes/views/header.html
+++ b/_includes/views/header.html
@@ -6,7 +6,7 @@
 {%- include functions.html func='get_value' default=true -%}
 {%- assign header_transparent = return -%}
 
-{%- if banner_image and header_transparent -%}
+{%- if has_banner and header_transparent -%}
   {%- assign header_transparent_class = "site-header-transparent" -%}
 {%- endif -%}
 
-- 
cgit v1.2.3