Quiero mostrar un esqueleto/marcador de posición antes de que se cargue el contenido de video completo, pero no sé cómo captar ese evento. Actualmente, primero se muestra un reproductor predeterminado y luego se muestra el video real (con diferentes dimensiones).
Este es mi componente.
const Video = ({ src, type }) => { const videoRef = useRef(); return ( <video ref={videoRef} autoPlay loop controls> <source src={src} type={type} /> </video> ); }; export default Video; //You will need a skeleton component that has a similar //structure to the component you're trying to load. The //implementation goes as follow. //1. Import your skeleton component inside your video component import VideoSkeleton from 'Video Skeleton module'; //2. add a fetch listener prop to your video component const Video = ({ src, type, isLoading }) => { // the rest of your code. }; export default Video; //3. based on the isLoading prop show the skeleton componet or the video component using the following logic const Video = ({ src, type, isLoading }) => { const videoRef = useRef(); return ( <div> { isLoading && <VideoSkeleton/> !isLaoding && <video ref={videoRef} autoPlay = { loop } controls = { controlles value } source = {src} type = {type} </video> } </div> )