Next.js中背景视频预加载启动屏失效问题排查

你的问题核心在于**fetch('myvideo.mp4')仅完成了视频文件的HTTP请求响应，并不代表视频已经被浏览器解码、准备好播放**。浏览器的video元素会单独发起加载解析流程（哪怕fetch已经拿到了文件，video仍需要处理资源），所以启动屏会提前消失，但视频还在后台加载解码，导致延迟显示。

下面是两种可行的修复方案，你可以根据需求选择：

方案一：监听Video元素的就绪事件（推荐） #

直接利用video元素本身的事件来判断视频是否准备就绪，能精准匹配视频的实际加载状态。

1. 修改VideoBackground组件，添加就绪回调 #

const VideoBackground = ({ video, onReady }) => {
  // 视频第一帧加载完成时触发，此时已可播放
  const handleLoadedData = () => {
    onReady?.();
  };

  // 若需要视频完全加载无中断播放，可改用onCanPlayThrough事件
  // const handleCanPlayThrough = () => { onReady?.(); };

  return (
    <div className="video_container">
      <video
        autoPlay
        muted
        loop={true}
        preload="auto"
        className="video_background"
        onLoadedData={handleLoadedData}
        // onCanPlayThrough={handleCanPlayThrough}
      >
        <source src={video} type="video/mp4" />
      </video>
    </div>
  );
};

2. 在_app.js中管理加载状态 #

把加载状态提升到_app.js，等待视频就绪后再显示页面：

import { useState } from 'react';

function MyApp({ Component, pageProps }) {
  const [isVideoReady, setIsVideoReady] = useState(false);

  return (
    <>
      {/* 加载屏：视频未就绪时显示 */}
      {!isVideoReady && <div style={{ position: 'fixed', inset: 0, display: 'grid', placeItems: 'center', background: '#000', color: '#fff' }}>Loading....</div>}
      
      {/* 页面内容：视频就绪后显示 */}
      <div style={{ display: isVideoReady ? 'block' : 'none' }}>
        <Component 
          {...pageProps} 
          onVideoReady={() => setIsVideoReady(true)} 
        />
      </div>
    </>
  );
}

export default MyApp;

3. 在主页面传递回调给VideoBackground #

// 主页面组件（比如pages/index.js）
export default function Home({ onVideoReady }) {
  return <VideoBackground video="/myvideo.mp4" onReady={onVideoReady} />;
}

方案二：在Splash组件中预加载视频（无需修改VideoBackground） #

如果不想改动VideoBackground，可以在Splash里创建一个隐藏的video元素，预加载视频并监听就绪事件，利用浏览器缓存让后续VideoBackground的视频直接读取缓存：

import { useState, useEffect } from 'react';

const Splash = ({ children }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 创建隐藏的video元素用于预加载
    const preloadVideo = document.createElement('video');
    preloadVideo.src = 'myvideo.mp4';
    preloadVideo.preload = 'auto';
    preloadVideo.muted = true; // 避免自动播放限制

    // 视频就绪后关闭加载屏
    const handleReady = () => {
      setLoading(false);
      preloadVideo.remove(); // 清理元素
    };

    // 绑定事件（选择loadeddata或canplaythrough）
    preloadVideo.addEventListener('loadeddata', handleReady);

    // 组件卸载时清理事件与元素
    return () => {
      preloadVideo.removeEventListener('loadeddata', handleReady);
      preloadVideo.remove();
    };
  }, []);

  return loading ? (
    <div style={{ position: 'fixed', inset: 0, display: 'grid', placeItems: 'center', background: '#000', color: '#fff' }}>Loading....</div>
  ) : (
    children
  );
};

export default Splash;

关键事件说明 #

• loadeddata：视频的第一帧已加载完成，此时视频已可播放（适合希望尽快显示页面的场景）。
• canplaythrough：浏览器预估视频可以无中断播放至结束（适合要求视频完全加载后再显示的场景）。

内容的提问来源于stack exchange，提问作者AFusco