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. He notado que la aplicación no muestra el video correctamente cuando la resolución es grande (el ancho o la altura son 4096 píxeles). Las resoluciones de 1920x1080 e incluso 3840x2160 funcionan bien. Pero 4096x2160 siempre da como resultado una pantalla blanca en blanco.

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.

¿Cómo puedo hacer que la aplicación admita videos de resoluciones más grandes? ¿Hay alguna biblioteca JS externa simple que pueda resolver este problema?

Un enlace a un video de alta resolución que no funciona en dispositivos móviles (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, {useState} from 'react'; import './App.css'; function App() { let [vid, setVid] = useState(null); return vid == null ? <input type={"file"} accept={'video/mp4,video/x-m4v,video/*'} onChange={e => onVideoSelected(e, setVid)} /> : <video style={{width: '100%', maxWidth: '400px', border: '1px solid black'}} autoPlay={true} muted={true}> <source src={vid} type="video/mp4" /> </video>; } function onVideoSelected(e, setVid) { let file = e.target.files[0]; let blob = URL.createObjectURL(file); setVid(blob); } export default App;

Cualquier ayuda es apreciada.