1

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 {

video-gen-app/src/pages/LoginPage.tsx

@@ -288,14 +288,8 @@ const LoginPage: React.FC = () => {
 
   return (
     <div className="login-page">
-      {/* 背景视频/动图全屏铺满 */}
+      {/* 背景视频/动图全屏铺满 — 预加载避免闪烁 */}
-      {loginBgVideo && (loginBgVideo.toLowerCase().endsWith('.gif') || loginBgVideo.toLowerCase().endsWith('.webp')) ? (
+      <BackgroundVideo src={loginBgVideo} />
-        <img className="login-bg-video" src={loginBgVideo} alt="" />
-      ) : loginBgVideo ? (
-        <video className="login-bg-video" autoPlay loop muted playsInline preload="auto">
-          <source src={loginBgVideo} type={loginBgVideo.endsWith('.webm') ? 'video/webm' : loginBgVideo.endsWith('.mov') ? 'video/quicktime' : 'video/mp4'} />
-        </video>
-      ) : null}
       <div className="login-bg-overlay" />
 
       {/* 左上角 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<HTMLVideoElement>(null);
+
+  if (!src) return null;
+
+  const isGif = src.toLowerCase().endsWith('.gif');
+  const isWebp = src.toLowerCase().endsWith('.webp');
+
+  if (isGif || isWebp) {
+    return <img className="login-bg-video" src={src} alt="" />;
+  }
+
+  const handleCanPlay = () => {
+    setReady(true);
+    vidRef.current?.play().catch(() => {});
+  };
+
+  return (
+    <>
+      {/* 视频加载前显示静态背景图作为占位 */}
+      {!ready && <div className="login-bg-video login-bg-poster" />}
+      <video
+        ref={vidRef}
+        className="login-bg-video"
+        style={{ opacity: ready ? 1 : 0 }}
+        autoPlay
+        loop
+        muted
+        playsInline
+        preload="auto"
+        decoding="auto"
+        x-webkit-airplay="allow"
+        onCanPlayThrough={handleCanPlay}
+        onCanPlay={handleCanPlay}
+      >
+        <source src={src} type={src.endsWith('.webm') ? 'video/webm' : src.endsWith('.mov') ? 'video/quicktime' : 'video/mp4'} />
+      </video>
+    </>
+  );
+};
+
 const SliderVerify: React.FC<{
   onSuccess: () => void;
   isVerified: boolean;