video optimz

Author: liaminw0

public/css/index.css

@@ -122,6 +122,8 @@
   display: block;
   object-fit: cover;
   background-color: #0f2c06;
+  transform: translateZ(0);
+  backface-visibility: hidden;
 }
 
 #heading-container .container-left p {

public/js/script.js

@@ -44,12 +44,53 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 
 document.addEventListener("DOMContentLoaded", function() {
   const heroVideo = document.querySelector("#heading-container .hero-video");
+  const heroSection = document.querySelector("#heading-container");
+  const isMobileViewport = window.matchMedia("(max-width: 900px)").matches;
+
+  function safePlayVideo(videoEl) {
+    if (!videoEl) {
+      return;
+    }
+    const playPromise = videoEl.play();
+    if (playPromise && typeof playPromise.catch === "function") {
+      playPromise.catch(function() {
+        // Ignore autoplay interruptions from browser policies.
+      });
+    }
+  }
+
   if (heroVideo) {
     heroVideo.addEventListener("loadedmetadata", function() {
       heroVideo.currentTime = 5.5;
     }, { once: true });
   }
 
+  if (heroVideo && heroSection && isMobileViewport && "IntersectionObserver" in window) {
+    let heroIsVisible = true;
+    const observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        heroIsVisible = entry.isIntersecting && entry.intersectionRatio >= 0.18;
+      });
+      if (heroIsVisible) {
+        safePlayVideo(heroVideo);
+      } else {
+        heroVideo.pause();
+      }
+    }, {
+      threshold: [0, 0.18, 0.4]
+    });
+
+    observer.observe(heroSection);
+
+    document.addEventListener("visibilitychange", function() {
+      if (document.hidden) {
+        heroVideo.pause();
+      } else if (heroIsVisible) {
+        safePlayVideo(heroVideo);
+      }
+    });
+  }
+
   const heroIntroTargets = document.querySelectorAll([
     "#heading-container .container-left img",
     "#heading-container .container-left p",

themes/Begrip/static/css/index.css

@@ -122,6 +122,8 @@
   display: block;
   object-fit: cover;
   background-color: #0f2c06;
+  transform: translateZ(0);
+  backface-visibility: hidden;
 }
 
 #heading-container .container-left p {

themes/Begrip/static/js/script.js

@@ -44,12 +44,53 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 
 document.addEventListener("DOMContentLoaded", function() {
   const heroVideo = document.querySelector("#heading-container .hero-video");
+  const heroSection = document.querySelector("#heading-container");
+  const isMobileViewport = window.matchMedia("(max-width: 900px)").matches;
+
+  function safePlayVideo(videoEl) {
+    if (!videoEl) {
+      return;
+    }
+    const playPromise = videoEl.play();
+    if (playPromise && typeof playPromise.catch === "function") {
+      playPromise.catch(function() {
+        // Ignore autoplay interruptions from browser policies.
+      });
+    }
+  }
+
   if (heroVideo) {
     heroVideo.addEventListener("loadedmetadata", function() {
       heroVideo.currentTime = 5.5;
     }, { once: true });
   }
 
+  if (heroVideo && heroSection && isMobileViewport && "IntersectionObserver" in window) {
+    let heroIsVisible = true;
+    const observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        heroIsVisible = entry.isIntersecting && entry.intersectionRatio >= 0.18;
+      });
+      if (heroIsVisible) {
+        safePlayVideo(heroVideo);
+      } else {
+        heroVideo.pause();
+      }
+    }, {
+      threshold: [0, 0.18, 0.4]
+    });
+
+    observer.observe(heroSection);
+
+    document.addEventListener("visibilitychange", function() {
+      if (document.hidden) {
+        heroVideo.pause();
+      } else if (heroIsVisible) {
+        safePlayVideo(heroVideo);
+      }
+    });
+  }
+
   const heroIntroTargets = document.querySelectorAll([
     "#heading-container .container-left img",
     "#heading-container .container-left p",