update

src/components/HomePage.vue

@@ -16,6 +16,8 @@ defineProps({
 const isMusicOn = ref(false);
 const audioElement = ref(null);
 const videoElement = ref(null);
+const videoLoaded = ref(false);
+const videoError = ref(false);
 
 // 初始化全局音频实例
 const initGlobalAudio = () => {
@@ -92,32 +94,70 @@ const checkAndPlayAudio = () => {
 
 // 初始化视频
 const initVideo = () => {
-  // 等待DOM渲染完成后初始化视频
   setTimeout(() => {
-    const video = document.querySelector('.background-video');
-    if (video) {
-      videoElement.value = video;
+    if (videoElement.value) {
+      const video = videoElement.value;
       
-      // 确保视频静音并循环播放
+      // 移动设备视频优化设置
       video.muted = true;
       video.loop = true;
       video.autoplay = true;
+      video.playsInline = true;
+      video.setAttribute('webkit-playsinline', 'true');
+      video.setAttribute('playsinline', 'true');
+      video.setAttribute('x5-video-player-type', 'h5');
+      video.setAttribute('x5-video-player-fullscreen', 'false');
       
-      // 处理移动设备的自动播放限制
-      video.addEventListener('canplaythrough', () => {
-        video.play().catch(error => {
-          console.log('视频自动播放被阻止:', error);
-        });
+      // 移动设备特殊处理
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      if (isMobile) {
+        video.preload = 'metadata'; // 移动设备使用较小的预加载
+        
+        // 尝试在用户交互后播放
+        const playVideo = () => {
+          video.play().then(() => {
+            console.log('移动设备视频播放成功');
+            videoLoaded.value = true;
+          }).catch(error => {
+            console.log('移动设备视频播放失败:', error);
+            videoError.value = true;
+          });
+        };
+        
+        // 在用户点击时尝试播放视频
+        document.addEventListener('touchstart', playVideo, { once: true });
+        document.addEventListener('click', playVideo, { once: true });
+      }
+      
+      // 按钮交互触发视频播放（用于 iOS 等严格的自动播放限制）
+      const buttons = document.querySelectorAll('.scene-item');
+      buttons.forEach(button => {
+        button.addEventListener('click', () => {
+          if (video.paused && !videoError.value) {
+            video.play().catch(error => {
+              console.log('点击后视频播放失败:', error);
+            });
+          }
+        }, { once: true });
       });
       
-      // 确保视频在加载完成后开始播放
-      if (video.readyState >= 3) {
-        video.play().catch(error => {
-          console.log('视频播放失败:', error);
-        });
-      }
+      // 监听视频事件
+      video.addEventListener('loadedmetadata', () => {
+        console.log('视频元数据加载完成');
+        if (!isMobile) {
+          video.play().catch(error => {
+            console.log('PC设备视频自动播放失败:', error);
+            videoError.value = true;
+          });
+        }
+      });
+      
+      video.addEventListener('canplay', () => {
+        videoLoaded.value = true;
+        videoError.value = false;
+      });
     }
-  }, 100);
+  }, 200);
 };
 
 // 播放/暂停切换
@@ -149,6 +189,28 @@ const toggleMusicState = () => {
   }
 };
 
+// 视频事件处理
+const onVideoLoadStart = () => {
+  console.log('视频开始加载');
+};
+
+const onVideoCanPlay = () => {
+  console.log('视频可以播放');
+  videoLoaded.value = true;
+  videoError.value = false;
+};
+
+const onVideoLoaded = () => {
+  console.log('视频数据加载完成');
+  videoLoaded.value = true;
+};
+
+const onVideoError = (event) => {
+  console.error('视频加载错误:', event);
+  videoError.value = true;
+  videoLoaded.value = false;
+};
+
 const navigateTodoList = () => {
   globalToastEvent.emit(ToastType.SHOW_TODO)
 }
@@ -274,13 +336,29 @@ watch(() => mergeId, async (newVal) => {
     <div class="home-wrapper">
       <!-- 视频背景 -->
       <video 
+        ref="videoElement"
         class="background-video" 
         :src="backgroundVideo" 
         autoplay 
         loop 
         muted 
         playsinline
-      ></video>
+        webkit-playsinline
+        preload="metadata"
+        x5-video-player-type="h5"
+        x5-video-player-fullscreen="false"
+        x5-video-orientation="portraint"
+        @loadstart="onVideoLoadStart"
+        @canplay="onVideoCanPlay"
+        @error="onVideoError"
+        @loadeddata="onVideoLoaded"
+      >
+        <!-- 为不支持视频的设备提供 fallback -->
+        <p style="display: none;">您的浏览器不支持视频播放</p>
+      </video>
+      
+      <!-- fallback 背景图，当视频无法加载时显示 -->
+      <div v-if="videoError || !videoLoaded" class="fallback-background"></div>
       
       <div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': globalStore.draw_chances <= 0 }">
         <img src="../assets/images/lottery.webp" alt="抽奖">
@@ -352,8 +430,22 @@ watch(() => mergeId, async (newVal) => {
   height: 100%;
   object-fit: cover; /* 保持视频比例并填满容器 */
   z-index: 0; /* 置于最底层 */
+  pointer-events: none; /* 禁止视频交互，避免影响按钮点击 */
 }
 
+/* fallback 背景图 */
+.fallback-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('../assets/images/home-bg.webp');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  z-index: -1; /* 置于视频下方 */
+}
 .scene-item {
   position: fixed;
   cursor: pointer;