Objetivo : intentar cargar un video en el servidor y mostrar la vista previa del video antes de cargarlo.
Error : la vista previa del video funciona bien por primera vez , pero cuando intento cargar el video nuevamente, la vista previa del nuevo video no se muestra y el video anterior sigue reproduciéndose.
Mi código : tengo una vista previa de videoPreview estatal y la estoy usando como fuente para mi fuente de etiquetas de video. El setVideoPreview se establece en el archivo cargado. Esto solo funciona la primera vez, pero si subo el video nuevamente, no se vuelve a reproducir y la vista previa del video anterior continúa reproduciéndose. Aquí está mi fragmento de código
<label for="videos"> <video width="400" height="150" style={{ height: "143px", objectFit: "contain" }} autoPlay loop > <source src={videoPreview} /> </video> </label> <input type="file" id="videos" accept="video/*" className="text-transparent -ml-52" onChange={(e) => { const files = e.target.files; let myFiles = Array.from(files); const fileReader = new FileReader(); fileReader.onload = () => { if (fileReader.readyState === 2) { formik.setFieldValue("video", myFiles); setVideoPreview(fileReader.result);//this is my state } }; if (e.target.files[0]) { fileReader.readAsDataURL(e.target.files[0]); } }} value={formik.values.video.name} />No tengo idea de por qué el estado no se actualiza o si se actualiza, la vista previa no cambia.
Después de algunas investigaciones, pude resolver el error a través de los detectores de eventos onloadstart y onloadend del objeto FileReader . Configuré videoPreview en nulo en onloadstart y en FileReader.result en onloadend .
Aquí está el código que usé en la función onChange
onChange={(e) => { const files = e.target.files; let myFiles = Array.from(files); const fileReader = new FileReader(); fileReader.onload = () => { if (fileReader.readyState === 2) { formik.setFieldValue("video", myFiles); } }; fileReader.onloadstart = () => { setVideoPreview(null); }; fileReader.onloadend = () => { setVideoPreview(fileReader.result); }; if (e.target.files[0]) { fileReader.readAsDataURL(e.target.files[0]); } }}