HTML Video failing on mobile

Question

I'm playing a video in ReactPlayer that generates an HTML5 video in a <video> tag. It's not working on mobile (tested on Safari, Chrome, and Firefox on iPhone 8 iOS 13.5.1)

I saw this question which let me know to disable autoplay and add playsinline for mobile, but it's still not working for me. The file I'm pulling, if it's relevant, is hosted on Google Cloud Storage

<div id="ReactPlayer" style="margin: auto; border-radius: 10px; min-height: 360px; min-width: 640px; display: block; width: 80%; height: 80%;">
  <video src="link_to_my_video" preload="auto" controls="" playsinline="" webkit-playsinline="" x5-playsinline="" style="width: 100%; height: 100%;">
  </video>
</div>

Does anyone know how to make it play on mobile? Thanks

EDIT

If helpful my links look like

"https://firebasestorage.googleapis.com/v0/b/my-mvp.appspot.com/o/videos%sub-folder?alt=media&token=my_token"

and the video it's pulling in is a .webm file

score 0 · Answer 1 · answered Jul 08 '20 at 11:56

For me, what worked was recording the video using mp4 instead of webm. This opens the issue of Chrome only being able to record using the webm MIME type, so you're essentially choosing between recording on Chrome, and Viewing on mobile devices. I don't have a clear answer on making video universal across all browsers

I will leave this question open in the hopes that someone can come up with a better solution

HTML Video failing on mobile

1 Answers1