优化聊天背景手机端打开是视频的问题

frontend/src/views/ChatView.vue

@@ -14,7 +14,15 @@
         class="background-video"
         autoplay
         loop
+        muted
         playsinline
+        webkit-playsinline="true"
+        x5-playsinline="true"
+        x5-video-player-type="h5"
+        x5-video-player-fullscreen="false"
+        :controls="false"
+        :disablePictureInPicture="true"
+        controlsList="nodownload noplaybackrate noremoteplayback"
         @canplay="handleBackgroundVideoReady"
       />
 
@@ -544,7 +552,65 @@ export default {
       }
     }
 
+    const enforceInlineBackgroundVideo = () => {
+      const video = backgroundVideoRef.value
+      if (!video) {
+        return
+      }
+
+      video.setAttribute('playsinline', 'true')
+      video.setAttribute('webkit-playsinline', 'true')
+      video.setAttribute('x5-playsinline', 'true')
+      video.setAttribute('x5-video-player-type', 'h5')
+      video.setAttribute('x5-video-player-fullscreen', 'false')
+      video.setAttribute('controls', 'false')
+      video.setAttribute('disablePictureInPicture', 'true')
+
+      const onTouch = (event) => {
+        event.preventDefault()
+      }
+
+      const onFullscreenAttempt = () => {
+        try {
+          if (document.fullscreenElement && document.exitFullscreen) {
+            document.exitFullscreen()
+          }
+          if (document.webkitFullscreenElement && document.webkitExitFullscreen) {
+            document.webkitExitFullscreen()
+          }
+        } catch (error) {
+          console.warn('Exit fullscreen attempt failed:', error)
+        }
+      }
+
+      if (!video.__chatInlineGuardBound) {
+        video.addEventListener('touchstart', onTouch, { passive: false })
+        video.addEventListener('touchend', onTouch, { passive: false })
+        video.addEventListener('webkitbeginfullscreen', onFullscreenAttempt)
+        video.addEventListener('fullscreenchange', onFullscreenAttempt)
+        video.__chatInlineGuardBound = true
+        video.__chatOnTouch = onTouch
+        video.__chatOnFullscreenAttempt = onFullscreenAttempt
+      }
+    }
+
+    const cleanupInlineBackgroundVideo = () => {
+      const video = backgroundVideoRef.value
+      if (!video || !video.__chatInlineGuardBound) {
+        return
+      }
+
+      video.removeEventListener('touchstart', video.__chatOnTouch)
+      video.removeEventListener('touchend', video.__chatOnTouch)
+      video.removeEventListener('webkitbeginfullscreen', video.__chatOnFullscreenAttempt)
+      video.removeEventListener('fullscreenchange', video.__chatOnFullscreenAttempt)
+      delete video.__chatInlineGuardBound
+      delete video.__chatOnTouch
+      delete video.__chatOnFullscreenAttempt
+    }
+
     const handleBackgroundVideoReady = async () => {
+      enforceInlineBackgroundVideo()
       await tryEnableBackgroundAudio()
     }
 
@@ -1304,6 +1370,7 @@ export default {
       await nextTick()
       updateInputPanelOffset()
       updateBubbleMeasurements()
+      enforceInlineBackgroundVideo()
       await tryEnableBackgroundAudio()
 
       const permissionState = await chatStore.checkMicrophonePermission()
@@ -1403,6 +1470,7 @@ export default {
         chatStore.exitCallMode()
         stopCallTimer()
       }
+      cleanupInlineBackgroundVideo()
       hideConversationBubbles()
       chatStore.clearMessages()
       document.removeEventListener('click', handleClickOutside)
@@ -1518,6 +1586,11 @@ export default {
     height: 100%;
     object-fit: cover;
     z-index: 1;
+    pointer-events: none;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
   }
 }