I have a simple React app where a user may upload a video from their device, and the video is then displayed on the page using a <video> tag.

I've tried uploading several videos from my mobile device to test the app. It worked fine for most videos, but for some seemingly random (yet always the same) videos, a white screen is displayed instead of the video when testing on mobile devices.

I've been testing mostly with 2 videos, one that works and another that doesn't. Both are of the same format (mp4), of a similar file size and of the same frame resolutions, which leaves me baffled as to what causes this.

Please note that this seems to only be happening on mobile browsers. When running the app on my PC all videos work fine.

A link to the non working video (13 seconds, 34 MB)

A screenshot of a working example

A screenshot of a non working example

The deployed app in case you want to try for yourself

The main component's code:

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;

Any help is appreciated.