1

estoy trabajando en un proyecto con React. Quiero que a través de un form el usuario pueda subir unas img y un video. Las img las estoy trabajando con una librería que se llama filepond. Pero me parece que no sirve para videos, así que estoy buscando la forma de poder subir los videos y que el usuario pueda hacer una previsualización del video que eligió. El preview puede ser un video corto o una thumbnail.

Alguien conoce alguna forma en que podría hacerlo? Por ahora solo encontré unas soluciones para videos que vienen desde url externas. Este es el pedacito de código donde estoy intentando subir el video:

<div className='uploadVideo'>
                <input
                  className="videoInput"
                  id="fileid"
                  placeholder='Puedes sumar videos'
                  name="video"
                  type="file"
                  accept="video/*"
                  onChange={handleChange}
                  required
                />
                <div className='confirmVideo'>
                   {videoUrl && (
                    <img alt='' src={videoUrl} />
                )} 
                </div>
              </div>

Gracias.

1 respuesta 1

2

Agregar una previsualización de un video con HTML y Javascript es muy simple. Solo necesitas crear una objeto URL y establecer el src del reproductor de video a este valor:

var fileInput = document.getElementById("file_video")
var video = document.getElementById("video_player")

fileInput.addEventListener("change",function(e) {
   video.src = URL.createObjectURL(this.files[0]);
})
input{
  display: block;
}
<video width="400"  src="mov_bbb.mp4" id="video_player" controls>
</video>

<input type="file" name="file" id="file_video" accept="video/*">

Por tanto, usando la lógica de React, es muy fácil implementarlo. No necesitas ninguna librería externa.

const {useState} = React;

function VideoUploader() {
    const [video,  setVideo] = useState("");
    
    const handleChange = (event) => {
        setVideo( URL.createObjectURL(event.target.files[0]));
    }

    return (
        <div className="App">
            <video 
               width="400" 
               height="300"
               src={video}
               id="video_player" 
               controls
            />
        
            <input 
               type="file"
               name="file" 
               id="file_video" 
               accept="video/*" 
               onChange={handleChange}
            />
        </div>)
}

ReactDOM.render(<VideoUploader />, document.getElementById("app"))
input{
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id="app"></div>

4
  • Hola Jaime, muchas gracias por tu respuesta. Si hago eso, se me genera el reproductor de video en el modal, arriba del selector de archivo, pero cuando elijo el archivo, no se ve el video en ese reproductor. ¿Cómo puedo corregir eso? Commented el 12 abr. 2022 a las 22:48
  • Listo! El problema era que tu solución estaba hecha con una función handleChange y yo estaba trabajando con una que se llamaba handleVideo. Cambié eso y ahora reproduce los primeros 4 segundos del video. Tienes idea si se puede customizar la cantidad de tiempo que muestra? Muchas gracias!! Commented el 12 abr. 2022 a las 22:53
  • @NicoBonder ¿Los primeros 4 segundos? A mi se me reproduce el video entero. ¿Lo probaste desde acá mismo desde el sitio dandole "ejecutar"?
    – Jaime
    Commented el 12 abr. 2022 a las 22:57
  • Perdón Jaime! No me di cuenta y probé con un video de 4 segundos. Muchas gracias por tu solución. Commented el 13 abr. 2022 a las 10:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.