Estoy tratando de crear un sitio web de redes sociales en el que puedas subir videos y los reproducirá en la pantalla de inicio. Tengo problemas para ver el video en el que hizo clic en la página de carga, pero tan pronto como se actualiza, el video desaparece y solo muestra una pantalla negra en el video. Está en un host local en este momento, que creo que es la razón por la que no funcionará.
este es el enlace que obtengo de la base de datos: blob:http://localhost:3000/1e655870-bb8e-44e5-b35b-8a9012d31116
¿Hay alguna manera de hacer un enlace a un video que siempre existe?
aquí está la página de carga:
const [files, setFiles] = useState([]); const [title,setTitle] = useState(""); const [userData, setUserData] = useState([]) const onDrop = useCallback(acceptedFiles => { setFiles(acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))); }, []); const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({ onDrop, accept: 'video/mp4' }); const style = useMemo(() => ({ ...baseStyle, ...(isDragActive ? activeStyle : {}), ...(isDragAccept ? acceptStyle : {}), ...(isDragReject ? rejectStyle : {}) }), [ isDragActive, isDragReject, isDragAccept ]); const thumbs = files.map(file => ( <div key={file.name}> <video className="videoPrev" src={file.preview} alt={file.name} controls style={{maxHeight:"100mm",maxWidth:"100mm"}} /> </div> )); 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); }); files.map(file => console.log(file.preview)); },[]) // clean up useEffect(() => () => { files.forEach(file => URL.revokeObjectURL(file.preview)); }, [files]); function handleSubmit(){ const url = files.map(file => (file.preview)).toString(); PostService .create(userData.username,title,url) .then(data => { //window.location = "/"; console.log(data); }).catch(err => { console.log(err.message); }); }