Lazy-Load-Videos init

Developer-Zahid · Feb 26, 2025 · 8240909 · 8240909
commit 8240909
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 0 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,19 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: grid;
+    place-items: center;
+    min-height: 100vh;
+}
+
+img,
+video
+{
+    display: block;
+    width: 100%;
+    max-width: 700px;
+}
diff --git a/assets/images/Webflow-Carousel-Thumbs-Slider-Poster.png b/assets/images/Webflow-Carousel-Thumbs-Slider-Poster.png
diff --git a/assets/images/Webflow-Jumbo-Effect-Cards-Slider-Poster.png b/assets/images/Webflow-Jumbo-Effect-Cards-Slider-Poster.png
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -0,0 +1,54 @@
+var Webflow = Webflow || [];
+Webflow.push(function () {
+// End
+});
+
+
+/* Lazy Load Videos Functions */
+if ($('figure[data-lazy-video-src]').length > 0) {
+
+    $('figure[data-lazy-video-src]').each(function() {
+        const $figure = $(this);
+        const videoSrc = $figure.attr('data-lazy-video-src');
+        const videoType = $figure.attr('data-lazy-video-type') || 'mp4';
+        const $posterImage = $figure.find('img');
+        const $posterImageClass = $posterImage.attr('class');
+        function replaceImageWithVideo() {
+            console.log("Poster Image Loaded, Replacing with Video");
+            const $highResVideo = $('<video>', {
+                autoplay: true,
+                muted: true,
+                loop: true,
+                playsinline: true,
+                preload: 'none',
+                fetchpriority: 'low',
+                decoding: 'async',
+                class: $posterImageClass,
+            });
+            $highResVideo.prop('muted', true);
+            const $videoSource = $('<source>', {
+                src: videoSrc,
+                type: `video/${videoType}`
+            });
+            $highResVideo.append($videoSource);
+            $highResVideo.on('loadeddata', function() {
+                $posterImage.remove(); // Remove the low-quality image
+                $figure.append($highResVideo); // Append the <video> to the <figure>
+                $figure.removeAttr('data-lazy-video-src'); // Optionally remove the attribute
+                console.log("Video Loaded and Rendered");
+            }).on('error', function() {
+                console.error("Video failed to load.");
+            });
+            // Start loading the video data manually
+            $highResVideo[0].load();
+        };
+        // Check if the image has already loaded
+        if ($posterImage[0].complete) {
+            replaceImageWithVideo();
+        } else {
+            // If the image is not yet loaded, add an event listener
+            $posterImage.on('load', replaceImageWithVideo);
+        }
+    });
+
+};
diff --git a/assets/videos/Webflow-Carousel-Thumbs-Slider.webm b/assets/videos/Webflow-Carousel-Thumbs-Slider.webm
diff --git a/assets/videos/Webflow-Jumbo-Effect-Cards-Slider.mp4 b/assets/videos/Webflow-Jumbo-Effect-Cards-Slider.mp4
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lazy Load Videos</title>
+    <link rel="stylesheet" href="./assets/css/style.css" />
+</head>
+<body>
+    <!-- <figure>
+        <img src="./assets/images/Webflow-Jumbo-Effect-Cards-Slider-Poster.png" alt="" />
+        <video preload="meta" playsinline="" muted="" loop="" autoplay>
+            <source src="./assets/videos/Webflow-Jumbo-Effect-Cards-Slider.mp4" type="video/mp4" />
+        </video>
+    </figure>
+    <figure>
+        <img src="./assets/images/Webflow-Carousel-Thumbs-Slider-Poster.png" alt="" />
+        <video preload="meta" playsinline="" muted="" loop="" autoplay>
+            <source src="./assets/videos/Webflow-Carousel-Thumbs-Slider.webm" type="video/webm" />
+        </video>
+    </figure> -->
+
+    <figure data-lazy-video-src="./assets/videos/Webflow-Jumbo-Effect-Cards-Slider.mp4">
+        <img class="class" src="./assets/images/Webflow-Jumbo-Effect-Cards-Slider-Poster.png" alt="Webflow-Jumbo-Effect-Cards-Slider-Poster" width="700" loading="lazy" fetchpriority="low" decoding="async" />
+    </figure>
+    <figure data-lazy-video-src="./assets/videos/Webflow-Carousel-Thumbs-Slider.webm" data-lazy-video-type="webm">
+        <img class="class" src="./assets/images/Webflow-Carousel-Thumbs-Slider-Poster.png" alt="Webflow-Carousel-Thumbs-Slider-Poster" width="700" loading="lazy" fetchpriority="low" decoding="async" />
+    </figure>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
+    <script src="./assets/js/script.js" defer></script>
+</body>
+</html>