Quiero reproducir el video de introducción solo una vez seguido de otro video que se repite. Tengo este código para detectar cuándo finaliza el primer video, pero ¿cómo cargo el segundo video y lo configuro para que se reproduzca en bucle?
const vidIndex = 0; const videos = [videoIntro, videoLoop]; return ( <div className="main"> <video src = {videos[vidIndex]} autoPlay muted onEnded={() => vidIndex++} /> </div> );Gracias.
Simplemente puede usar un useState para rastrear el índice de video. CódigoSandbox
import { useEffect, useState, useRef } from "react"; const videoIntro = "https://www.w3schools.com/tags/movie.mp4"; const videoLoop = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"; function App() { const [vidIndex, setVidIndex] = useState(0); const ref = useRef(null); useEffect(() => { if (vidIndex === 0 && ref.current) { ref.current.play(); } }, [ref, vidIndex]); return ( <div className="main"> <video style={{ display: vidIndex === 1 ? "none" : "block" }} src={videoIntro} autoPlay muted onEnded={() => setVidIndex((idx) => idx + 1)} /> <video style={{ display: vidIndex === 0 ? "none" : "block" }} src={videoLoop} muted loop ref={ref} /> </div> ); }