在backgyoung - REACT中播放本地视频

Question

我制作了一个包含3个本地视频的数组，我希望它们在主页上作为背景每5秒改变一次。我创建了一个数组setup State，当我输入console。log State时，我看到控制台每5秒调用一个新视频，但在我的屏幕上只有第一个视频一直循环。在视频源返回时，如果我硬编码视频[0]，[1]或[2]，它将播放下一个视频。

这是我的代码:

let videoArray = [Miami, Miami2, Miami3];
function Home() {
const [videos, setVideos] = useState(videoArray);
const [currentVideo, setCurrentVideo] = useState(0);
//CHANGE VIDEOS FROM ARRAY EVERY 5 SECONDS
useEffect( () => {
const interval = setInterval(() => {   
setCurrentVideo(currentVideo => (currentVideo+1)%videos.length)  
}, 5000);
return () => clearInterval(interval);
}, [videos]);
return (

<div id='home' className='home-div'> 
<video autoPlay loop muted className="video">
<source src={videos[currentVideo]} type='video/mp4' />
</video> 

Answer 1

好了，我明白了。也许将来会对别人有所帮助。我想这不是最好的解决方案，但它符合我的要求。

This function changes video onClick.
function playVideo(source) {
let video = document.getElementById('player');
video.src= source;
video.load();
video.play();
} 

This function changes video every 12 secods.
useEffect( () => {
const interval = setInterval(() => {   
setCurrentVideo(currentVideo => (currentVideo+1)%videos.length)
let video = document.getElementById('player');
video.src= videos[currentVideo];
video.load();
video.play();    
// console.log(currentVideo)
}, 12000);
return () => clearInterval(interval); 
}, [currentVideo]);


<video id="player" autoPlay loop muted className="video">
<source id="source1" src={videos[currentVideo]} type='video/mp4' />
</video> 
{/* <p style={{background:'red'}}>{videos[currentVideo]}</p> */}
<div className='buttons'>
<button src={Miami} id="video1" onClick={()=>playVideo(Miami)}></button>
<button src={Miami2} id="video2" onClick={()=>playVideo(Miami2)}></button>
<button src={Miami3} id="video3" onClick={()=>playVideo(Miami3)}></button>
</div>