终极大招：网页、ios用视频，安卓用动图。

public/.gitattributes

@@ -0,0 +1 @@
+*.gif filter=lfs diff=lfs merge=lfs -text

public/trans.bat

@@ -0,0 +1,46 @@
+@echo off
+setlocal enabledelayedexpansion
+
+REM --------------------------------------------------
+REM 批量将当前目录（不含子目录）下所有 .mp4 转为高质量 GIF
+REM GIF 文件名前缀 "Gif_"
+REM 若目标文件存在则自动覆盖
+REM --------------------------------------------------
+
+REM 用户可按需调整：
+set "WIDTH=992"
+set "FPS=10"
+REM --------------------------------------------------
+
+for %%F in (*.mp4) do (
+    set "INPUT=%%F"
+    set "BASENAME=%%~nF"
+    set "PALETTE=palette_!BASENAME!.png"
+    set "OUTPUT=Gif_!BASENAME!.gif"
+
+    echo.
+    echo [PROCESS] %%F -> !OUTPUT!
+
+    REM 1) 生成调色板
+    ffmpeg -hide_banner -y -i "%%F" -vf "fps=%FPS%,scale=%WIDTH%:-1:flags=lanczos,palettegen" "!PALETTE!"
+    if errorlevel 1 (
+        echo [ERROR] 调色板生成失败: %%F
+    ) else (
+        REM 2) 按调色板生成 GIF
+        ffmpeg -hide_banner -y -i "%%F" -i "!PALETTE!" ^
+          -filter_complex "fps=%FPS%,scale=%WIDTH%:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=none" ^
+          "!OUTPUT!"
+        if errorlevel 1 (
+            echo [ERROR] GIF 生成失败: %%F
+        ) else (
+            echo [OK] 已生成: !OUTPUT!
+        )
+    )
+
+    REM 删除临时调色板
+    del /q "!PALETTE!" 2>nul
+)
+
+echo.
+echo 全部转换完成！
+pause

src/components/Examples.vue

@@ -5,7 +5,24 @@ import ExamplesContent from './ExamplesContent.vue';
 <template>
   <div class="pageroot" id="examplesprocessroot">
     <div id="examplebanner" class="videorootbanner">
-      <video poster="/bannervideopreload.png" controls="" id="expbannervideo" muted autoplay="autoplay" loop="loop" playsinline webkit-playsinline class="bannervideos">
+      <img v-if="$isMobile.android.phone||$isMobile.android.tablet"
+           src="/ExpVideoPreload.png"
+           class="videoimg"/>
+      <video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
+          poster="/ExpVideoPreload.png"
+          controls=""
+          id="expbannervideo"
+          muted autoplay="autoplay"
+          loop="loop" playsinline webkit-playsinline
+          class="bannervideos">
+        <source src="/ExpVideo.mp4" type="video/mp4"></source>
+      </video>
+      <video v-else
+          poster="/ExpVideoPreload.png"
+          id="expbannervideo"
+          muted autoplay="autoplay"
+          loop="loop" playsinline webkit-playsinline
+          class="bannervideos">
         <source src="/ExpVideo.mp4" type="video/mp4"></source>
       </video>
       <div id="expbanner" class="bannerovervideo">

src/components/Homepage.vue

@@ -1,11 +1,28 @@
 <script setup>
 import ExamplesContent from './ExamplesContent.vue'
 import Partners from './Tools/Partners.vue'
+import { useBootstrapBreakpoint } from './useBreakpoint.js';
+const { breakpoint } = useBootstrapBreakpoint();
 </script>
 <template>
 <div id="homepageroot" class="pageroot">
   <div id="homepagebanner" class="videorootbanner">
-    <video poster="/bannervideopreload.png" controls="" id="bannervideo" muted autoplay="autoplay" loop="loop" playsinline webkit-playsinline class="bannervideos">
+    <img v-if="$isMobile.android.phone||$isMobile.android.tablet"
+         src="/bannervideopreload.png"
+         class="videoimg"/>
+    <video v-else-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
+           poster="/bannervideopreload.png" controls=""
+           id="bannervideo" muted autoplay="autoplay" loop="loop"
+           playsinline webkit-playsinline
+           class="bannervideos"
+           x5-video-player-type="h5-page">
+      <source src="/HpgVideo.mp4" type="video/mp4"></source>
+    </video>
+    <video v-else poster="/bannervideopreload.png"
+           id="bannervideo" muted autoplay="autoplay" loop="loop"
+           playsinline webkit-playsinline
+           class="bannervideos"
+           x5-video-player-type="h5-page">
       <source src="/HpgVideo.mp4" type="video/mp4"></source>
     </video>
     <div id="hpbanner" class="bannerovervideo">