Improve video autoplay behavior for WebRTC and HLS players

squashkiwi-streaming/config/web/index.html

@@ -140,7 +140,7 @@
 
         <div class="video-section">
             <div class="video-container">
-                <video id="video" controls autoplay muted></video>
+                <video id="video" controls autoplay muted playsinline></video>
             </div>
             <div class="video-controls">
                 <div class="status-badge offline" id="status">

squashkiwi-streaming/config/web/webrtc.html

@@ -39,6 +39,23 @@
             height: 0;
             background: black;
         }
+        .play-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 20px 40px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1.2rem;
+            z-index: 10;
+            display: none;
+        }
+        .play-overlay:hover {
+            background: rgba(0, 0, 0, 0.9);
+        }
         video {
             position: absolute;
             top: 0;
@@ -115,7 +132,8 @@
 
         <div class="video-section">
             <div class="video-container">
-                <video id="video" controls autoplay muted></video>
+                <video id="video" controls autoplay muted playsinline></video>
+                <div id="playOverlay" class="play-overlay">▶️ Click to Play</div>
             </div>
             <div class="video-controls">
                 <div class="status-badge offline" id="status">
@@ -160,6 +178,29 @@
             pc.ontrack = (event) => {
                 console.log('Got track:', event.track.kind);
                 video.srcObject = event.streams[0];
+                const playOverlay = document.getElementById('playOverlay');
+                
+                // Ensure autoplay works
+                video.play().then(() => {
+                    console.log('Video playback started automatically');
+                    playOverlay.style.display = 'none';
+                }).catch(e => {
+                    console.log('Autoplay was blocked, user interaction may be required:', e);
+                    // Show play overlay
+                    playOverlay.style.display = 'block';
+                    
+                    // Add click handlers to both overlay and video
+                    const startPlayback = () => {
+                        video.play().then(() => {
+                            playOverlay.style.display = 'none';
+                        });
+                        video.onclick = null;
+                        playOverlay.onclick = null;
+                    };
+                    
+                    video.onclick = startPlayback;
+                    playOverlay.onclick = startPlayback;
+                });
                 updateStatus(true);
             };