Search code examples
videomp4mov

.mp4 file uploaded from react-native won't play in chrome

I have a situation where I am recorded a video via expo / react-native and uploaded it to a s3 bucket. However, when I access the s3 link in the browser, the video will not play. However, the video will play in VLC media player if i download it first. I'm not sure why the video won't play in chrome (or any other browser). The expected behavior is the link will play in the browser.

Steps to reproduce:

  1. Record video via react-native (this will save the video as a .mov file)
  2. "Convert" the file to .mp4 by using Expo's FileSystem.moveAsync() to rename the file to .mp4
  3. Upload to s3 (with mime type video/mp4)
  4. Open the s3 link in the browser:

enter image description here

However, if I download the video an open it in VLC, it will play fine. Does anyone know what's going on?

Note - I was inspired by this SO to convert .mov to .mp4 by simply changing the file's extension How can I convert mov to mp4 on ios device

Link to the file: https://sandbox-of-sandboxes.s3.amazonaws.com/iKmlKprIs.mp4

Solution

  • The files is encoded using the HEVC codec. HEVC is not universally supported by all browser. You must covert the file to AVC/h.264