/** view.js **/
|
document.addEventListener("DOMContentLoaded", function () {
|
const lazyVideos = [].slice.call(
|
document.querySelectorAll(".video-container video")
|
);
|
|
// 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));
|
});
|
