From 6d4680a527c4085f9d7a3357afdc0c970dca83c8 Mon Sep 17 00:00:00 2001
From: jeffreytse <jeffreytse.mail@gmail.com>
Date: Sun, 27 Jun 2021 17:04:20 +0800
Subject: [PATCH] fix: video banner is not working in Safari (#47)

Auto add muted and playsinline properties when this permission
issue occurred.
---
 _includes/views/banner.html | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/_includes/views/banner.html b/_includes/views/banner.html
index 554a915..1db45a5 100644
--- a/_includes/views/banner.html
+++ b/_includes/views/banner.html
@@ -69,6 +69,7 @@
         <video
           autoplay=""
           poster="{{ banner_image }}"
+          playsinline
         >
           <source src="{{ banner_video }}">
         </video>
@@ -76,19 +77,17 @@
           (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);
+              video.play().catch (function() {
+                  video.muted = true;
+                  video.play();
+                });
             }
 
-            window.addEventListener('focus', videoPlay);
-
             video.onloadstart = function() {
-              video.volume = {{ banner_volume }};
               video.currentTime = {{ banner_start_at }};
+              video.volume = {{ banner_volume }};
+              video.muted = (video.volume == 0);
+              videoPlay();
             }
 
             video.onended = function() {