Update app.py

app.py

@@ -315,6 +315,7 @@ HTML_PAGE = """\
   .video-section {
     position: relative;
     width: 100%;
+    min-height: 300px;
     max-height: 45vh;
     background: #000;
     border-radius: 12px;
@@ -504,8 +505,8 @@ HTML_PAGE = """\
   <!-- VIDEO PLAYER with crossfade -->
   <div class="video-section">
     <div class="video-container">
-      <video id="videoA" muted playsinline></video>
-      <video id="videoB" muted playsinline></video>
+      <video id="videoA" muted autoplay playsinline></video>
+      <video id="videoB" muted autoplay playsinline></video>
     </div>
     <div class="video-status" id="videoStatus">Loading...</div>
   </div>
@@ -547,13 +548,15 @@ const btnReset = document.getElementById('btnReset');
 function getActiveVideo() { return currentVideo === 'A' ? videoA : videoB; }
 function getInactiveVideo() { return currentVideo === 'A' ? videoB : videoA; }
 
-function crossfadeTo(videoUrl) {
+function crossfadeTo(videoUrl, isMuted) {
     if (isTransitioning) return;
     isTransitioning = true;
 
     const prev = getActiveVideo();
     const next = getInactiveVideo();
 
+    // Set muted state (idle=muted, lipsync=unmuted if audio separate)
+    next.muted = (isMuted !== false);
     next.src = videoUrl;
     next.load();
 
@@ -578,6 +581,23 @@ function crossfadeTo(videoUrl) {
         }).catch(err => {
             console.error('[VIDEO] Play failed:', err);
             isTransitioning = false;
+            // Retry once on autoplay failure
+            next.muted = true;
+            next.play().then(() => {
+                next.style.opacity = '1';
+                setTimeout(() => {
+                    prev.style.opacity = '0';
+                    prev.pause();
+                    prev.src = '';
+                    prev.style.zIndex = '0';
+                    next.style.zIndex = '1';
+                    currentVideo = currentVideo === 'A' ? 'B' : 'A';
+                    isTransitioning = false;
+                }, 300);
+            }).catch(e => {
+                console.error('[VIDEO] Muted retry also failed:', e);
+                isTransitioning = false;
+            });
         });
     };
 
@@ -602,7 +622,7 @@ function playNextIdle() {
     if (!clip) return;
     lastPlayed = clip.filename;
     videoStatus.textContent = 'idle: ' + clip.name;
-    crossfadeTo('/api/stream/' + encodeURIComponent(clip.filename));
+    crossfadeTo('/api/stream/' + encodeURIComponent(clip.filename), true);
 }
 
 // When active video ends → play next idle (unless processing)
@@ -715,7 +735,7 @@ async function sendMessage() {
         // Play lipsync video if available (Phase 2)
         if (data.lipsync_video_url) {
             videoStatus.textContent = 'speaking...';
-            crossfadeTo(data.lipsync_video_url);
+            crossfadeTo(data.lipsync_video_url, true);
             // After lipsync ends, resume idle
             const activeVid = getInactiveVideo(); // will become active after crossfade
             const onLipsyncEnd = () => {