React实现首页背景本地视频每5秒轮播仅首视频循环问题

问题根因 #

• <video> 标签仅在首次挂载时加载 <source> 指定的资源，后续 src 属性更新时不会自动触发资源重载，因此即便 currentVideo 状态正常轮询，视频播放内容也不会变化。
• 原有代码中 useEffect 依赖项配置不合理，且没有监听视频索引变化去触发视频重载逻辑。

修复后代码 #

import { useRef, useState, useEffect } from 'react';
// 此处替换为你实际的视频资源导入路径
import Miami from './assets/Miami.mp4';
import Miami2 from './assets/Miami2.mp4';
import Miami3 from './assets/Miami3.mp4';

// 静态资源数组不需要存入state
const videoArray = [Miami, Miami2, Miami3];

function Home() {
  const [currentVideo, setCurrentVideo] = useState(0);
  // 创建ref关联video DOM元素
  const videoRef = useRef(null);

  // 5秒轮询更新视频索引
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentVideo(prev => (prev + 1) % videoArray.length);
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  // 监听索引变化，手动重载播放新视频
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.load();
      videoRef.current.play();
    }
  }, [currentVideo]);

  return (
    <div id='home' className='home-div'>
      <video 
        ref={videoRef}
        autoPlay 
        loop 
        muted 
        className="video"
      >
        <source src={videoArray[currentVideo]} type='video/mp4' />
      </video>
    </div>
  );
}

export default Home;

修改说明 #

• 移除冗余的 videos 状态：固定的静态资源数组不需要存入state，直接全局定义使用即可
• 新增 videoRef 直接操作video DOM实例，实现手动控制资源加载
• 新增单独的监听逻辑：currentVideo 变化时先调用 load() 加载新的视频资源，再调用 play() 触发播放
• 定时器的 useEffect 清空依赖项，避免不必要的重复执行

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