Generic video play controls

Author: ThomasFarstrike

index.html

@@ -230,14 +230,29 @@
             cursor: pointer;
         }
 
-        /* Video play overlay container */
-        .video-container {
+        /*
+         * =====================================================================
+         * Generic Video Play Overlay Styles
+         * =====================================================================
+         * Usage: Add the attribute `data-play-overlay` to any <video> element.
+         * The JavaScript below will automatically wrap the video in a container
+         * and inject a clickable/keyboard-accessible play overlay.
+         *
+         * Example:
+         *   <video data-play-overlay poster="thumb.png" ...>
+         *     <source src="video.mp4" type="video/mp4">
+         *   </video>
+         * =====================================================================
+         */
+
+        /* Container injected around each <video data-play-overlay> */
+        .video-overlay-container {
             position: relative;
             display: inline-block;
             width: 100%;
         }
 
-        /* Video play overlay button */
+        /* Overlay button covering the video; hidden when .hidden class is added */
         .video-play-overlay {
             position: absolute;
             top: 0;
@@ -263,7 +278,7 @@
             outline-offset: 2px;
         }
 
-        /* Play icon: circle with triangle */
+        /* Play icon: white circle with CSS triangle */
         .play-icon {
             width: 72px;
             height: 72px;
@@ -487,16 +502,11 @@ <h2>Screenshots</h2>
                 <img src="screenshots/light/0.0.6/mpos_camera_qr_320x240.png" alt="Camera QR Code Screenshot"/>
                 <img src="screenshots/light/0.0.6/osupdate_progress3.png" alt="OS Update Progress Screenshot"/>
                 <img src="screenshots/dark/0.0.4/0.0.4_launcher1.png" alt="Dark Theme Launcher Screenshot"/>
-                <!-- Video play overlay: wraps video with clickable play button -->
-                <div class="video-container">
-                    <video id="quasibird-video" playsinline poster="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" width="320" height="240" preload="auto">
-                        <source src="videos/QuasiBird_0.0.3.mp4" type="video/mp4">
-                        <img src="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" alt="QuasiBird game in action">
-                    </video>
-                    <div class="video-play-overlay" id="quasibird-play-overlay" tabindex="0" role="button" aria-label="Play video">
-                        <div class="play-icon"></div>
-                    </div>
-                </div>
+                <!-- To add a play overlay to any video, just add the data-play-overlay attribute -->
+                <video data-play-overlay loop muted playsinline poster="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" width="320" height="240" preload="auto">
+                    <source src="videos/QuasiBird_0.0.3.mp4" type="video/mp4">
+                    <img src="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" alt="QuasiBird game in action">
+                </video>
                 <img src="screenshots/dark/0.3.3/wifi_password.png" alt="Dark Theme WiFi Password Screenshot"/>
                 <img src="screenshots/dark/0.0.4/0.0.4_appstore_uninstall_draw.png" alt="Dark Theme App Store Uninstall Screenshot"/>
                 <img src="screenshots/dark/0.0.4/0.0.4_imu1.png" alt="Dark Theme IMU Screenshot"/>
@@ -573,29 +583,83 @@ <h2>Possibilities</h2>
         }
     </script>
 
-    <!-- JavaScript for Video Play Overlay -->
+    <!--
+      =========================================================================
+      Generic Video Play Overlay Script
+      =========================================================================
+      Automatically initializes play overlays for all <video data-play-overlay>
+      elements. The script:
+        1. Wraps each video in a .video-overlay-container
+        2. Injects a .video-play-overlay button with a CSS play icon
+        3. Handles click, Enter, and Space to play the video
+        4. Shows native controls after playback starts
+        5. Re-shows the overlay when the video ends (for replay)
+
+      To opt-in a new video, simply add the data-play-overlay attribute:
+        <video data-play-overlay poster="thumb.png" ...>
+          <source src="video.mp4" type="video/mp4">
+        </video>
+      =========================================================================
+    -->
     <script>
-        (function() {
-            const overlay = document.getElementById('quasibird-play-overlay');
-            const video = document.getElementById('quasibird-video');
-
-            if (overlay && video) {
-                function playVideo() {
+        (function initVideoPlayOverlays() {
+            // Prevent double-initialization
+            if (window.__videoPlayOverlaysInitialized) return;
+            window.__videoPlayOverlaysInitialized = true;
+
+            const videos = document.querySelectorAll('video[data-play-overlay]');
+            if (!videos.length) return;
+
+            videos.forEach(function(video) {
+                // Remove autoplay to ensure video doesn't start on page load
+                video.removeAttribute('autoplay');
+
+                // Create container wrapper
+                const container = document.createElement('div');
+                container.className = 'video-overlay-container';
+
+                // Insert container before video, then move video inside
+                video.parentNode.insertBefore(container, video);
+                container.appendChild(video);
+
+                // Create overlay button
+                const overlay = document.createElement('div');
+                overlay.className = 'video-play-overlay';
+                overlay.setAttribute('tabindex', '0');
+                overlay.setAttribute('role', 'button');
+                overlay.setAttribute('aria-label', 'Play video');
+
+                // Create play icon (CSS-styled circle + triangle)
+                const playIcon = document.createElement('div');
+                playIcon.className = 'play-icon';
+                overlay.appendChild(playIcon);
+
+                // Insert overlay into container
+                container.appendChild(overlay);
+
+                // Activation handler: play video, hide overlay, show controls
+                function activateVideo() {
                     video.play();
                     overlay.classList.add('hidden');
+                    video.controls = true;
                 }
 
                 // Click handler
-                overlay.addEventListener('click', playVideo);
+                overlay.addEventListener('click', activateVideo);
 
                 // Keyboard handler (Enter or Space)
                 overlay.addEventListener('keydown', function(e) {
                     if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
-                        playVideo();
+                        activateVideo();
                     }
                 });
-            }
+
+                // When video ends, show overlay again for replay
+                video.addEventListener('ended', function() {
+                    overlay.classList.remove('hidden');
+                });
+            });
         })();
     </script>
 </body>