Olanetsoft · May 25, 2025 16:28
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Method 2: Intersection Observer API</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header>
      <h1>Method 2: Intersection Observer API</h1>
      <p>JavaScript-based approach for precise control</p>
    </header>

    <!-- Hero video - loads immediately -->
    <section class="hero">
      <video class="hero-video" autoplay muted playsinline loop>
        <source src="videos/hero-demo.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <div class="hero-content">
        <h2>Intersection Observer</h2>
        <p>Precise control and feedback</p>
      </div>
    </section>

    <!-- Spacer to create scroll distance -->
    <div class="spacer">
      <div>
        <h2>Scroll down to see advanced lazy loading</h2>
        <p>Watch the real-time status updates and distance tracking</p>
      </div>
    </div>

    <!-- Demo section -->
    <section class="demo-section">
      <h2>Intersection Observer Demo</h2>

      <!-- Status display -->
      <div class="status-display">
        <div class="status-item">
          <span class="label">Status:</span>
          <span class="value" id="observer-status">Not loaded</span>
        </div>
        <div class="status-item">
          <span class="label">Distance from viewport:</span>
          <span class="value" id="observer-distance">Calculating...</span>
        </div>
        <div class="status-item">
          <span class="label">Load trigger:</span>
          <span class="value">200px before viewport</span>
        </div>
      </div>

      <!-- Lazy loaded video -->
      <div class="video-container">
        <video class="lazy-video" data-autoplay muted playsinline loop>
          <!-- Source will be added by JavaScript -->
        </video>
      </div>

      <!-- Code example -->
      <div class="code-example">
        <pre><code>const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadVideo(entry.target);
      observer.unobserve(entry.target);
    }
  });
 }, { 
  rootMargin: '200px 0px',
  threshold: 0 
 });

 observer.observe(video);</code></pre>
      </div>

      <!-- Method information -->
      <div class="method-info">
        <h3>How Intersection Observer Works</h3>
        <p>
          The Intersection Observer API provides precise control over when
          videos load. It triggers exactly when the video is 200px from entering
          the viewport, can coordinate with autoplay, and provides real-time
          feedback about loading status.
        </p>

        <div class="pros-cons">
          <div class="pros">
            <h3>Advantages</h3>
            <ul>
              <li>Precise control over loading threshold</li>
              <li>Real-time status updates</li>
              <li>Can coordinate with autoplay</li>
              <li>Works in all modern browsers</li>
              <li>Customizable trigger distances</li>
            </ul>
          </div>
          <div class="cons">
            <h3>Limitations</h3>
            <ul>
              <li>Requires JavaScript implementation</li>
              <li>More complex than native loading</li>
              <li>Need to handle browser compatibility</li>
              <li>Manual video source management</li>
              <li>Additional code maintenance</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <script src="js/main.js"></script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Method 2: Intersection Observer API</title>
	<link rel="stylesheet" href="css/styles.css" />
	</head>
	<body>
	<header>
	<h1>Method 2: Intersection Observer API</h1>
	<p>JavaScript-based approach for precise control</p>
	</header>

	<!-- Hero video - loads immediately -->
	<section class="hero">
	<video class="hero-video" autoplay muted playsinline loop>
	<source src="videos/hero-demo.mp4" type="video/mp4" />
	Your browser does not support the video tag.
	</video>
	<div class="hero-content">
	<h2>Intersection Observer</h2>
	<p>Precise control and feedback</p>
	</div>
	</section>

	<!-- Spacer to create scroll distance -->
	<div class="spacer">
	<div>
	<h2>Scroll down to see advanced lazy loading</h2>
	<p>Watch the real-time status updates and distance tracking</p>
	</div>
	</div>

	<!-- Demo section -->
	<section class="demo-section">
	<h2>Intersection Observer Demo</h2>

	<!-- Status display -->
	<div class="status-display">
	<div class="status-item">
	<span class="label">Status:</span>
	<span class="value" id="observer-status">Not loaded</span>
	</div>
	<div class="status-item">
	<span class="label">Distance from viewport:</span>
	<span class="value" id="observer-distance">Calculating...</span>
	</div>
	<div class="status-item">
	<span class="label">Load trigger:</span>
	<span class="value">200px before viewport</span>
	</div>
	</div>

	<!-- Lazy loaded video -->
	<div class="video-container">
	<video class="lazy-video" data-autoplay muted playsinline loop>
	<!-- Source will be added by JavaScript -->
	</video>
	</div>

	<!-- Code example -->
	<div class="code-example">
	<pre><code>const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	loadVideo(entry.target);
	observer.unobserve(entry.target);
	}
	});
	}, {
	rootMargin: '200px 0px',
	threshold: 0
	});

	observer.observe(video);</code></pre>
	</div>

	<!-- Method information -->
	<div class="method-info">
	<h3>How Intersection Observer Works</h3>
	<p>
	The Intersection Observer API provides precise control over when
	videos load. It triggers exactly when the video is 200px from entering
	the viewport, can coordinate with autoplay, and provides real-time
	feedback about loading status.
	</p>

	<div class="pros-cons">
	<div class="pros">
	<h3>Advantages</h3>
	<ul>
	<li>Precise control over loading threshold</li>
	<li>Real-time status updates</li>
	<li>Can coordinate with autoplay</li>
	<li>Works in all modern browsers</li>
	<li>Customizable trigger distances</li>
	</ul>
	</div>
	<div class="cons">
	<h3>Limitations</h3>
	<ul>
	<li>Requires JavaScript implementation</li>
	<li>More complex than native loading</li>
	<li>Need to handle browser compatibility</li>
	<li>Manual video source management</li>
	<li>Additional code maintenance</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<script src="js/main.js"></script>
	</body>
	</html>