React应用移动端使用HTML5 <video>标签部分视频显示白屏问题排查求助

Problem Description #

I’ve built a simple React app that lets users upload videos from their device and display them using the <video> tag. Most videos play fine on mobile browsers, but specific MP4 files consistently show a white screen instead of the video content.

Both test videos are MP4 format, with similar file sizes and resolutions. All videos work perfectly on desktop browsers—the issue is only present on mobile.

Relevant Details #

• Link to the problematic video (13 seconds, 34MB)
• Screenshot of normal video playback
• Screenshot of the white screen issue
• Deployed app URL (testable directly)

Component 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;

Request for Help #

I’m stuck figuring out why these specific MP4s fail on mobile when others with similar specs work. Could anyone share troubleshooting steps or solutions to resolve this playback issue? Any insights into mobile browser video codec support or potential gaps in my implementation would be a huge help.

Content sourced from Stack Exchange, question author: Jonathan Shifman