feat(Splash): 添加视频加载失败时的图片降级方案

当视频加载或播放失败时，自动切换到图片背景避免黑屏
添加视频加载状态检测和错误处理回调
优化微信环境下的视频自动播放处理

@@ -2,6 +2,7 @@
   <div class="splash-container" :class="{ 'fade-out': isExiting }">
   <div class="splash-container" :class="{ 'fade-out': isExiting }">
     <!-- 背景视频 -->
     <!-- 背景视频 -->
     <video
     <video
+        v-show="!use_image_bg"
         ref="videoPlayer"
         ref="videoPlayer"
         class="background-video"
         class="background-video"
         autoplay
         autoplay
@@ -10,10 +11,22 @@
         playsinline
         playsinline
         webkit-playsinline
         webkit-playsinline
         preload="auto"
         preload="auto"
+        @error="on_video_error"
+        @stalled="on_video_error"
+        @abort="on_video_error"
+        @emptied="on_video_error"
+        @loadeddata="on_video_loaded"
     >
     >
         <source :src="videoUrl" type="video/mp4" />
         <source :src="videoUrl" type="video/mp4" />
     </video>
     </video>
 
 
+    <!-- 图片降级背景（视频不可用时显示） -->
+    <div
+        v-if="use_image_bg"
+        class="background-image"
+        :style="{ backgroundImage: 'url(' + imgUrl + ')' }"
+    ></div>
+
     <!-- 黑色半透明蒙板 -->
     <!-- 黑色半透明蒙板 -->
     <div class="overlay"></div>
     <div class="overlay"></div>
 
 
@@ -50,44 +63,91 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const router = useRouter()
 const isExiting = ref(false)
 const isExiting = ref(false)
 const videoPlayer = ref(null)
 const videoPlayer = ref(null)
+const use_image_bg = ref(false)
+const is_video_ready = ref(false)
 
 
 // TODO: 视频配置
 // TODO: 视频配置
 const videoUrl = ref('https://cdn.ipadbiz.cn/stdj/video/sample-10s.mp4')
 const videoUrl = ref('https://cdn.ipadbiz.cn/stdj/video/sample-10s.mp4')
+const imgUrl = ref('https://cdn.ipadbiz.cn/stdj/images/%E5%90%AF%E5%8A%A8%E9%A1%B5%E6%B5%B7%E6%8A%A5%E8%83%8C%E6%99%AF@2x.png')
 
 
 // 进入应用函数
 // 进入应用函数
+/**
+ * 进入应用
+ * 说明：触发淡出动画后跳转到首页
+ */
 const enterApp = () => {
 const enterApp = () => {
-  isExiting.value = true
-  // 等待淡出动画完成后跳转
-  setTimeout(() => {
-    router.push('/home')
-  }, 500)
+    isExiting.value = true
+    // 等待淡出动画完成后跳转
+    setTimeout(() => {
+        router.push('/home')
+    }, 500)
 }
 }
 
 
 onMounted(() => {
 onMounted(() => {
-  const video = videoPlayer.value
-  if (video) {
-    // 尝试播放视频
-    const playPromise = video.play()
-
-    if (playPromise !== undefined) {
-      playPromise.catch(error => {
-        // 自动播放被阻止，在微信环境下尝试通过 WeixinJSBridge 播放
-        console.log('自动播放失败:', error)
-        const ua = navigator.userAgent.toLowerCase()
-        if (ua.match(/MicroMessenger/i) && typeof window.WeixinJSBridge !== 'undefined') {
-          window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
-            video.play()
-          })
+    const video = videoPlayer.value
+    if (video) {
+        // 尝试播放视频
+        const playPromise = video.play()
+
+        if (playPromise !== undefined) {
+            playPromise.catch(error => {
+                // 自动播放被阻止：在微信环境下尝试通过 WeixinJSBridge 播放
+                // 说明：避免控制台输出引起诊断问题
+                void error
+                const ua = navigator.userAgent.toLowerCase()
+                if (ua.match(/MicroMessenger/i) && typeof window.WeixinJSBridge !== 'undefined') {
+                    window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
+                        video.play()
+                    })
+                }
+                // 若短时间内仍无法播放，降级为图片背景，避免黑屏
+                setTimeout(() => {
+                    if (!is_video_ready.value) {
+                        enable_image_fallback()
+                    }
+                }, 1200)
+            })
         }
         }
-      })
+
+        // 监听微信JSBridgeReady事件
+        document.addEventListener('WeixinJSBridgeReady', () => {
+            video.play()
+        }, false)
     }
     }
 
 
-    // 监听微信JSBridgeReady事件
-    document.addEventListener('WeixinJSBridgeReady', () => {
-        video.play()
-    }, false)
-  }
+    // 兜底：在一定时间内仍未加载完成则切换到图片背景
+    // setTimeout(() => {
+    //     if (!is_video_ready.value) {
+    //         enable_image_fallback()
+    //     }
+    // }, 5000)
 })
 })
+
+/**
+ * 视频加载成功回调
+ * 说明：标记视频已可播放，用于取消降级处理
+ */
+const on_video_loaded = () => {
+    is_video_ready.value = true
+}
+
+/**
+ * 视频错误回调
+ * 说明：视频加载/播放失败时触发图片降级，避免黑屏
+ * @param {Event} e 事件对象
+ */
+const on_video_error = (e) => {
+    void e
+    enable_image_fallback()
+}
+
+/**
+ * 启用图片降级背景
+ * 说明：切换到全屏图片背景，保证用户视觉不出现黑屏
+ */
+const enable_image_fallback = () => {
+    use_image_bg.value = true
+}
 </script>
 </script>
 
 
 <style scoped lang="less">
 <style scoped lang="less">
@@ -121,6 +181,21 @@ onMounted(() => {
     animation: backgroundFadeIn 0.8s ease-out forwards;
     animation: backgroundFadeIn 0.8s ease-out forwards;
 }
 }
 
 
+/* 图片降级背景 */
+.background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0;
+    animation: backgroundFadeIn 0.8s ease-out forwards;
+}
+
 /* 黑色半透明蒙板 */
 /* 黑色半透明蒙板 */
 .overlay {
 .overlay {
   position: absolute;
   position: absolute;