<CSS>

.wrap_lazy-videos {

	display: flex;
	flex-wrap: wrap;
	gap: 1rem;

	.wrap_lazy-video {

		opacity: 0;

		&:has(video) {

			opacity: 1;
                  	inline-size: fit-content;
                  	outline:     1px solid color-mix(in srgb, currentColor 33%, transparent);

                  	video {
                  		position: relative;
                        	transition: opacity 1s;
                        	&.lazy-waiting { opacity: 0 }
                        	opacity: 1;
                	}
                }
	}
}

.wrap_lazy-video {
  background-image:
    radial-gradient(
      transparent,
      hsla(0, 0%, 0%, 0.85)),
    linear-gradient(
      transparent    75%, 
      hsl(0, 0%, 0%) 75%),
    linear-gradient(to left, 
      hsl(  0,   0%, 82%) 14.29%,
      hsl( 54, 100%, 50%) 14.29%,
      hsl( 54, 100%, 50%) 28.57%,
      hsl(184, 100%, 50%) 28.57%,
      hsl(184, 100%, 50%) 42.86%,
      hsl(121,  98%, 42%) 42.86%,
      hsl(121,  98%, 42%) 57.14%,
      hsl(320,  93%, 37%) 57.14%,
      hsl(320,  93%, 37%) 71.43%,
      hsl(349, 100%, 50%) 71.43%,
      hsl(349, 100%, 50%) 85.71%,
      hsl(240, 100%, 38%) 85.71%);
  position: relative;
  overflow:hidden;
}
.wrap_lazy-video:before {
  content: '';
  position: absolute;
  display: block;
  background-image:
    linear-gradient(to left, 
      hsl(240, 100%, 38%) 14.29%,
      hsl(  0,   0%,  0%) 14.29%,
      hsl(  0,   0%,  0%) 28.57%,
      hsl(320,  93%, 27%) 28.57%,
      hsl(320,  93%, 27%) 42.86%,
      hsl(  0,   0%,  0%) 42.86%,
      hsl(  0,   0%,  0%) 57.14%,
      hsl(184, 100%, 50%) 57.14%,
      hsl(184, 100%, 50%) 71.43%,
      hsl(  0,   0%,  0%) 71.43%,
      hsl(  0,   0%,  0%) 85.71%,
      hsl(  0,  0%, 82%) 85.71%);
  height: 5%;
  width: 100%;
  bottom: 25%;
}

</CSS>

<JS>

document.addEventListener("DOMContentLoaded", () => {

  document.querySelectorAll(".wrap_lazy-videos .wrap_lazy-video").forEach(function(wrap_video) {

          var video_path	= wrap_video.textContent;
          var dokuwiki_path	= video_path;
          var src_path		= ("/_media/" + video_path).replaceAll(":", "/");
          var basename 		= src_path.split('/').reverse()[0];

          var html = 	'<video title="' + basename + '" class="lazy-waiting media" width="320" height="240" controls="controls" muted autoplay loop playsinline preload="auto">' +
                                  '<source data-src="' + src_path + '" type="video/mp4">' +
                                  '<a href="' + src_path + '?cache=" class="media mediafile mf_mp4" title="' + dokuwiki_path + '">' + basename + '</a>' + 
                          '</video>';

          wrap_video.innerHTML = html;

  });

  const videos = document.querySelectorAll(".wrap_lazy-videos .wrap_lazy-video video");

  // Track state to avoid repeated work
  const state = new WeakMap();

  // Batch updates per frame
  let pending = new Set();
  let scheduled = false;

  const schedule = (video, isVisible) => {
    pending.add({ video, isVisible });

    if (!scheduled) {
      scheduled = true;

      requestAnimationFrame(() => {
        for (const item of pending) {
          if (item.isVisible) {
            loadVideo(item.video);
          } else {
            unloadVideo(item.video);
          }
        }

        pending.clear();
        scheduled = false;
      });
    }
  };

  const loadVideo = (video) => {
    const s = state.get(video);
    if (s === "loaded") return;

    const source = video.querySelector("source[data-src]");
    if (!source) return;

    source.src = source.dataset.src;
    video.load();

    if (video.autoplay) {
      video.play().catch(() => {});
    }

    state.set(video, "loaded");
    video.classList.remove("lazy-waiting");
  };

  const unloadVideo = (video) => {
    const s = state.get(video);
    if (s === "unloaded") return;

    video.pause();
    video.currentTime = 0;

    const source = video.querySelector("source");

    if (source && source.src) {
      source.dataset.src = source.src;
      source.removeAttribute("src");
    }

    video.load();

    state.set(video, "unloaded");
    video.classList.add("lazy-waiting");
  };

  // Visibility debounce per element
  const visibilityTimers = new WeakMap();

  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        const video = entry.target;

        // Clear previous debounce
        if (visibilityTimers.has(video)) {
          clearTimeout(visibilityTimers.get(video));
        }

        // Debounce visibility changes
        const t = setTimeout(() => {
          const isVisible = entry.isIntersecting;

          // Optional buffer: avoid unload too aggressively
          schedule(video, isVisible);
        }, 120); // 100–150ms is typical

        visibilityTimers.set(video, t);
      }
    },
    {
      root: null,
      threshold: 0.25,
      rootMargin: "300px 0px" // preload slightly before visible
    }
  );

  videos.forEach((v) => {
    state.set(v, "unloaded");
    observer.observe(v);
  });
});

</JS>