import React, { useState, useEffect } from 'react'; interface VideoPlayerProps { videoUrl: string; } const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => { const [isValidFormat, setIsValidFormat] = useState(true); useEffect(() => { const videoExtension = videoUrl.substring(videoUrl.lastIndexOf('.') + 1); const allowedExtensions = ['mp4', 'avi', 'mkv']; // Agrega aquí las extensiones permitidas setIsValidFormat(allowedExtensions.includes(videoExtension)); }, [videoUrl]); if (!isValidFormat) { return <p className="text-red-500">El formato del video no es válido.</p>; } return ( <div className="flex justify-center items-center"> <video className="w-full max-w-lg" controls> <source src={videoUrl} type="video/mp4" /> <source src={videoUrl} type="video/avi" /> <source src={videoUrl} type="video/mkv" /> Tu navegador no admite la reproducción de videos. </video> </div> ); }; export default VideoPlayer;