Tengo una aplicación React simple donde un usuario puede cargar un video desde su dispositivo, y luego el video se muestra en la página usando una etiqueta <video> .

He intentado subir varios videos desde mi dispositivo móvil para probar la aplicación. Funcionó bien para la mayoría de los videos, pero para algunos videos aparentemente aleatorios (pero siempre iguales), se muestra una pantalla blanca en lugar del video cuando se prueba en dispositivos móviles .

He estado probando mayormente con 2 videos, uno que funciona y otro que no. Ambos son del mismo formato (mp4), de un tamaño de archivo similar y de las mismas resoluciones de cuadro, lo que me deja desconcertado en cuanto a la causa de esto.

Tenga en cuenta que esto parece estar sucediendo solo en los navegadores móviles. Cuando ejecuto la aplicación en mi PC, todos los videos funcionan bien.

Un enlace al video que no funciona (13 segundos, 34 MB)

Una captura de pantalla de un ejemplo de trabajo

Una captura de pantalla de un ejemplo que no funciona

La aplicación desplegada en caso de que quieras probar por ti mismo

El código del componente principal:

 import React from 'react'; import './App.css'; import {useState} from 'react'; function App() { let [vidBase64, setVidBase64] = useState(null); return vidBase64 == null ? <input type={"file"} accept={'video/mp4,video/x-m4v,video/*'} onChange={e => onVideoSelected(e, setVidBase64)} /> : <video src={vidBase64} style={{width: '100%', maxWidth: '400px', border: '1px solid black'}}></video>; } function onVideoSelected(e, setVidBase64) { let file = e.target.files[0]; if (file == null) return; let reader = new FileReader(); reader.onload = () => onVideoLoaded(setVidBase64, reader); reader.readAsDataURL(file); } function onVideoLoaded(setVidBase64, reader) { setVidBase64(reader.result); } export default App;

Cualquier ayuda es apreciada.