Estoy tratando de reproducir videos que obtengo del servidor, pero los videos no muestran nada y aparece este error en la consola: Error al cargar el recurso: net::ERR_FILE_NOT_FOUND.

así es como se ven los enlaces que intento reproducir desde el servidor: "blob:http://localhost:3000/fd2ba95b-480a-4a46-baf0-8423e1163f7e"

aquí está el formulario de carga que sube videos al servidor.

 export default function Previews(props) { const [files, setFiles] = useState([]); const [title,setTitle] = useState(""); const [userData,setUserData] = useState([]); useEffect(() => { const currentUser = AuthService.getCurrentUser(); AuthService.getUser(currentUser.id).then(results => { console.log(results.data.user); setUserData(results.data.user); }).catch(err => { console.log(err.message); }); },[]) const {getRootProps, getInputProps} = useDropzone({ onDrop: acceptedFiles => { setFiles(acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file), }))); } }); const thumbs = files.map(file => ( <div style={thumb} key={file.name}> <div style={thumbInner}> <img autoPlay={true} src={file.preview} style={img} alt="src" /> </div> </div> )); useEffect(() => { // Make sure to revoke the data uris to avoid memory leaks files.forEach(file => URL.revokeObjectURL(file.preview)); }, [files]); const upload = () => { const url = files.map(file => (file.preview)).toString(); PostService .create(userData.username,title,url) .then(() => { window.location = "/"; console.log(url); }).catch(err => { console.log(err.message); }); } return ( <div className="notborder"> <h1><strong>Upload</strong></h1> <br/> <h2>Add Caption</h2> <center> <input value={title} onChange={(e) => setTitle(e.target.value)} className="addtitle"/> </center> <center> <button onClick={upload} className="upload-btn">upload</button> </center> <section className="contained"> <center> <div {...getRootProps({className: 'dropzone'})}> <input {...getInputProps()} /> <p className="dragndrop">drop files here, or click to select files</p> </div> </center> <center> <aside style={{borderBottom:"none"}} > {thumbs} </aside> </center> </section> </div> ); }