Olanetsoft · May 26, 2025 14:43
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 3: Cloudinary SDK Integration</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header>
      <h1>Method 3: Cloudinary SDK Integration</h1>
      <p>Intelligent optimization with lazy loading</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>Cloudinary Optimization</h2>
        <p>AI-powered video delivery</p>
      </div>
    </section>

    <!-- Spacer to create scroll distance -->
    <div class="spacer">
      <div>
        <h2>Scroll down to see intelligent optimization</h2>
        <p>Watch automatic format and quality selection</p>
      </div>
    </div>

    <!-- Demo section -->
    <section class="demo-section">
      <h2>Cloudinary SDK Demo</h2>

      <!-- Real-time optimization display -->
      <div class="optimization-display">
        <div class="status-item">
          <span class="label">Connection:</span>
          <span class="value" id="connection-type">Detecting...</span>
        </div>
        <div class="status-item">
          <span class="label">Applied Quality:</span>
          <span class="value" id="applied-quality">Auto</span>
        </div>
        <div class="status-item">
          <span class="label">Applied Format:</span>
          <span class="value" id="applied-format">Auto</span>
        </div>
        <div class="status-item">
          <span class="label">File Size Reduction:</span>
          <span class="value" id="size-reduction">Calculating...</span>
        </div>
      </div>

      <!-- Video container - Cloudinary will insert optimized video here -->
      <div class="video-container" id="cloudinary-video-container">
        <!-- Optimized video will be inserted here -->
      </div>

      <!-- Transformation URL display -->
      <div class="transformation-display">
        <h4>Current Cloudinary Transformation:</h4>
        <div class="url-display" id="transformation-url">
          Loading Cloudinary optimizations...
        </div>
      </div>

      <!-- Code example -->
      <div class="code-example">
        <pre><code>// Cloudinary automatically optimizes videos
 const videoTag = cloudinary.videoTag('your-video', {
  quality: 'auto',    // AI selects optimal quality
  format: 'auto',     // Best format for each browser
  width: 'auto',      // Responsive sizing
  loading: 'lazy'     // Built-in lazy loading
 });</code></pre>
      </div>

      <!-- Method comparison -->
      <div class="method-info">
        <h3>Why Cloudinary is Better</h3>
        <p>
          Unlike Methods 1 & 2 which only control <em>when</em> videos load,
          Cloudinary optimizes <em>what</em> loads. It automatically delivers
          the smallest possible file while maintaining quality, resulting in
          60-80% smaller file sizes on average.
        </p>

        <div class="comparison-grid">
          <div class="comparison-item">
            <h4>Previous Methods</h4>
            <ul>
              <li>Same large video file for everyone</li>
              <li>No format optimization</li>
              <li>No quality adaptation</li>
              <li>Manual lazy loading setup</li>
            </ul>
          </div>
          <div class="comparison-item better">
            <h4>Cloudinary Method</h4>
            <ul>
              <li>Automatically sized for each device</li>
              <li>Best format per browser (WebM/MP4)</li>
              <li>AI-powered quality optimization</li>
              <li>Built-in lazy loading</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Include Cloudinary SDK -->
    <script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js"></script>
    <script src="js/cloudinary-config.js"></script>
    <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 3: Cloudinary SDK Integration</title>
	<link rel="stylesheet" href="css/styles.css" />
	</head>
	<body>
	<header>
	<h1>Method 3: Cloudinary SDK Integration</h1>
	<p>Intelligent optimization with lazy loading</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>Cloudinary Optimization</h2>
	<p>AI-powered video delivery</p>
	</div>
	</section>

	<!-- Spacer to create scroll distance -->
	<div class="spacer">
	<div>
	<h2>Scroll down to see intelligent optimization</h2>
	<p>Watch automatic format and quality selection</p>
	</div>
	</div>

	<!-- Demo section -->
	<section class="demo-section">
	<h2>Cloudinary SDK Demo</h2>

	<!-- Real-time optimization display -->
	<div class="optimization-display">
	<div class="status-item">
	<span class="label">Connection:</span>
	<span class="value" id="connection-type">Detecting...</span>
	</div>
	<div class="status-item">
	<span class="label">Applied Quality:</span>
	<span class="value" id="applied-quality">Auto</span>
	</div>
	<div class="status-item">
	<span class="label">Applied Format:</span>
	<span class="value" id="applied-format">Auto</span>
	</div>
	<div class="status-item">
	<span class="label">File Size Reduction:</span>
	<span class="value" id="size-reduction">Calculating...</span>
	</div>
	</div>

	<!-- Video container - Cloudinary will insert optimized video here -->
	<div class="video-container" id="cloudinary-video-container">
	<!-- Optimized video will be inserted here -->
	</div>

	<!-- Transformation URL display -->
	<div class="transformation-display">
	<h4>Current Cloudinary Transformation:</h4>
	<div class="url-display" id="transformation-url">
	Loading Cloudinary optimizations...
	</div>
	</div>

	<!-- Code example -->
	<div class="code-example">
	<pre><code>// Cloudinary automatically optimizes videos
	const videoTag = cloudinary.videoTag('your-video', {
	quality: 'auto', // AI selects optimal quality
	format: 'auto', // Best format for each browser
	width: 'auto', // Responsive sizing
	loading: 'lazy' // Built-in lazy loading
	});</code></pre>
	</div>

	<!-- Method comparison -->
	<div class="method-info">
	<h3>Why Cloudinary is Better</h3>
	<p>
	Unlike Methods 1 & 2 which only control <em>when</em> videos load,
	Cloudinary optimizes <em>what</em> loads. It automatically delivers
	the smallest possible file while maintaining quality, resulting in
	60-80% smaller file sizes on average.
	</p>

	<div class="comparison-grid">
	<div class="comparison-item">
	<h4>Previous Methods</h4>
	<ul>
	<li>Same large video file for everyone</li>
	<li>No format optimization</li>
	<li>No quality adaptation</li>
	<li>Manual lazy loading setup</li>
	</ul>
	</div>
	<div class="comparison-item better">
	<h4>Cloudinary Method</h4>
	<ul>
	<li>Automatically sized for each device</li>
	<li>Best format per browser (WebM/MP4)</li>
	<li>AI-powered quality optimization</li>
	<li>Built-in lazy loading</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- Include Cloudinary SDK -->
	<script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js"></script>
	<script src="js/cloudinary-config.js"></script>
	<script src="js/main.js"></script>
	</body>
	</html>