| | |
| | | const observer = new IntersectionObserver((entries) => { |
| | | entries.forEach(entry => { |
| | | if (entry.isIntersecting) { |
| | | loadVideo(entry.target); |
| | | observer.unobserve(entry.target); |
| | | } |
| | | }); |
| | | }); |
| | | document.addEventListener("DOMContentLoaded", function () { |
| | | const lazyVideos = [].slice.call( |
| | | document.querySelectorAll(".video-container video") |
| | | ); |
| | | |
| | | document.querySelectorAll('.video-container .placeholder').forEach(el => { |
| | | observer.observe(el); |
| | | // Build a helper to actually set sources + load |
| | | function loadVideo(video) { |
| | | const sources = video.querySelectorAll("source[data-src]"); |
| | | sources.forEach(source => { |
| | | source.src = source.dataset.src; |
| | | }); |
| | | video.load(); |
| | | } |
| | | |
| | | // --- 1. IntersectionObserver (best case) --- |
| | | if ("IntersectionObserver" in window) { |
| | | const lazyVideoObserver = new IntersectionObserver( |
| | | function (entries, observer) { |
| | | entries.forEach(entry => { |
| | | if (entry.isIntersecting) { |
| | | loadVideo(entry.target); |
| | | observer.unobserve(entry.target); |
| | | } |
| | | }); |
| | | }, |
| | | { |
| | | rootMargin: "200px 0px", |
| | | threshold: 0.1, |
| | | } |
| | | ); |
| | | |
| | | lazyVideos.forEach(video => lazyVideoObserver.observe(video)); |
| | | return; |
| | | } |
| | | |
| | | // --- 2. Fallback: requestIdleCallback --- |
| | | if ("requestIdleCallback" in window) { |
| | | requestIdleCallback(() => { |
| | | lazyVideos.forEach(video => loadVideo(video)); |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // --- 3. Final fallback: load immediately --- |
| | | lazyVideos.forEach(video => loadVideo(video)); |
| | | }); |