Блог

я пытаюсь создать сайт в социальных сетях, на который вы могли бы загружать видео, и он будет воспроизводить их на главном экране. У меня возникли проблемы, когда вы можете увидеть видео, на которое вы нажали на странице загрузки, но как только оно обновляется, видео исчезает, и на видео отображается только черный экран. Сейчас он находится на локальном хостинге, и я думаю, что именно по этой причине он не будет работать.

это ссылка, которую я получаю из базы данных: большой двоичный объект:http://localhost:3000/1e655870-bb8e-44e5-b35b-8a9012d31116

есть ли способ сделать ссылку на видео, которое всегда существует?

вот страница загрузки:

  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);
  });

 }