diff --git a/video-gen-app/src/pages/LoginPage.css b/video-gen-app/src/pages/LoginPage.css
index 9a7cbd3d..7a3702ff 100644
--- a/video-gen-app/src/pages/LoginPage.css
+++ b/video-gen-app/src/pages/LoginPage.css
@@ -24,6 +24,14 @@
object-fit: cover;
z-index: 0;
pointer-events: none;
+ transition: opacity 0.6s ease;
+}
+
+/* 视频加载前占位 — 直接显示背景图,避免闪烁 */
+.login-bg-poster {
+ background-image: url(/backimage.png);
+ background-size: cover;
+ background-position: center;
}
.login-bg-overlay {
diff --git a/video-gen-app/src/pages/LoginPage.tsx b/video-gen-app/src/pages/LoginPage.tsx
index 38f174a5..6d48d3a7 100644
--- a/video-gen-app/src/pages/LoginPage.tsx
+++ b/video-gen-app/src/pages/LoginPage.tsx
@@ -288,14 +288,8 @@ const LoginPage: React.FC = () => {
return (
- {/* 背景视频/动图全屏铺满 */}
- {loginBgVideo && (loginBgVideo.toLowerCase().endsWith('.gif') || loginBgVideo.toLowerCase().endsWith('.webp')) ? (
-

- ) : loginBgVideo ? (
-
- ) : null}
+ {/* 背景视频/动图全屏铺满 — 预加载避免闪烁 */}
+
{/* 左上角 slogan */}
@@ -508,6 +502,48 @@ const LoginPage: React.FC = () => {
);
};
+const BackgroundVideo: React.FC<{ src: string }> = ({ src }) => {
+ const [ready, setReady] = useState(false);
+ const vidRef = React.useRef
(null);
+
+ if (!src) return null;
+
+ const isGif = src.toLowerCase().endsWith('.gif');
+ const isWebp = src.toLowerCase().endsWith('.webp');
+
+ if (isGif || isWebp) {
+ return
;
+ }
+
+ const handleCanPlay = () => {
+ setReady(true);
+ vidRef.current?.play().catch(() => {});
+ };
+
+ return (
+ <>
+ {/* 视频加载前显示静态背景图作为占位 */}
+ {!ready && }
+
+ >
+ );
+};
+
const SliderVerify: React.FC<{
onSuccess: () => void;
isVerified: boolean;