1

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.

Jonathan Shifman
  • 21
  • 2
  • Don't base64 encode your video oO. Use a blob: URL instead, see https://stackoverflow.com/q/36035721/3702797 – Kaiido Oct 09 '21 at 10:03

1 Answers1

0

Hey Jonathan you are using the video tag wrongly.

You can check w3schools doc here.

You need to change your video tag to this, see working example at codesandbox.


<video style={{width: '100%', maxWidth: '400px', border: '1px solid black'}}>

  <source src={vidBase64} type="video/mp4" />

</video>;
julien.leroux5
  • 969
  • 7
  • 17
nitin varda
  • 119
  • 2
  • 4
  • Hey Nitin. I ran the sandbox from my phone and tried to upload the problematic video and unfortunately it still didn't seem to be working. I will edit my question and add a link to the video that's not working. Thank you. – Jonathan Shifman Oct 09 '21 at 09:12
  • Which format is the video you are trying , is it mp4 ? if yes, try to upload it from pc. even after that ,if you face the problem check the video size , if it is big it will take time according to size for appearing. if not mp4 , see the supported formats in w3school link. – nitin varda Oct 09 '21 at 09:52
  • It is an mp4 video with a size of 33MB. The size is not the issue because other videos with similar (and larger) sizes appear as they are supposed to. As stated in the question, I have tried to upload both videos from my PC and both worked just fine. Mobile browsers is where one of the videos doesn't work. – Jonathan Shifman Oct 12 '21 at 14:39