Estoy cargando un archivo de video usando antd Upload. Quiero cargar el video y proporcionar el video cargado a la etiqueta <video> como fuente, pero no obtengo la solución adecuada para ello. ¿Puedes sacarme de la solución? Gracias de antemano.
import React, { useState } from 'react'; import { Upload, Button } from "antd"; export default function UploadComponent(props) { const initialstate = { videoSrc:"" } const [videoSrc , seVideoSrc] = useState(""); const { videoSrc } = apiData; const handleChange = (info) => { console.log(info) //set the video file to videoSrc here }; return ( <React.Fragment> <div className="action"> <Upload className="mt-3 mb-3" accept=".mp4" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture" maxCount={1} onChange={handleChange}> <Button> Upload </Button> </Upload> <video width="400" controls> <source src={videoSrc.Src} type={videoSrc.type} /> Your browser does not support HTML5 video. </video> </div> </React.Fragment> ) }Ignore cualquier error de sintaxis. Solo quiero que mi video se reproduzca tal como se cargó y cualquier consejo profesional para cargarlo.
Obtuve la solución haciendo algunos cambios
const [videoSrc , seVideoSrc] = useState(""); const handleChange = ({file}) => { var reader = new FileReader(); console.log(file) var url = URL.createObjectURL(file.originFileObj); seVideoSrc(url); };Y use React-Player para reproducir videos subidos localmente
import "../node_modules/video-react/dist/video-react.css"; import { Player } from "video-react"; ..... <Player playsInline src={videoSrc} fluid={false} width={480} height={272} />