audio in video not playing in some devices - Follow Up Deployment

index.html

@@ -65,7 +65,7 @@
                 <p class="text-white/70 text-xl">Loading Nexus Robotics Experience</p>
             </div>
         </div>
-        <video id="bgVideo" autoplay loop playsinline muted class="w-full h-full object-cover">
+        <video id="bgVideo" autoplay loop playsinline muted class="w-full h-full object-cover" preload="auto" poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
             <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.mp4" type="video/mp4">
             <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.webm" type="video/webm">
         </video>
@@ -145,19 +145,31 @@
                 return;
             }
             
-            // Try to play video
-            const playPromise = video.play();
+            // Try to play video with audio handling
+            const tryPlay = () => {
+                const playPromise = video.play();
+                
+                if (playPromise !== undefined) {
+                    playPromise.then(() => {
+                        // Video playing successfully
+                        fallback.classList.add('hidden');
+                    }).catch(error => {
+                        // Try again without mute if muted
+                        if (video.muted) {
+                            video.muted = false;
+                            tryPlay();
+                        } else {
+                            // Final fallback
+                            video.style.display = 'none';
+                            fallback.classList.remove('hidden');
+                        }
+                    });
+                }
+            };
             
-            if (playPromise !== undefined) {
-                playPromise.then(() => {
-                    // Video playing successfully
-                    fallback.classList.add('hidden');
-                }).catch(error => {
-                    // Video failed to play
-                    video.style.display = 'none';
-                    fallback.classList.remove('hidden');
-                });
-            }
+            // Start with muted video for autoplay compliance
+            video.muted = true;
+            tryPlay();
             
             // Fallback if video doesn't load within 5 seconds
             setTimeout(() => {
@@ -177,6 +189,16 @@
             soundToggle.innerHTML = video.muted 
                 ? '<i class="fas fa-volume-mute text-white text-xl"></i>' 
                 : '<i class="fas fa-volume-up text-white text-xl"></i>';
+            
+            // Try to unmute if user clicked to enable sound
+            if (!video.muted) {
+                video.play().catch(e => {
+                    // If unmute fails, show message
+                    alert('Audio playback requires user interaction. Please tap/click anywhere else on the page first.');
+                    video.muted = true;
+                    soundToggle.innerHTML = '<i class="fas fa-volume-mute text-white text-xl"></i>';
+                });
+            }
         });
 
         // Simple animation for the join button