Mp4 video rotation metadata

Question

I have developed an android/ios video sharing app that records a video and uploads it to amazon s3. For compatibility both android/ios record in mp4 format with H264/AAC codecs.

The users might shoot portrait or landscape and the app, getting info from the sensors, set the rotation of the file (mediarecorder.setOrientationHint on android and something similar on iOS)

The videos from iOS play fine on android and vice versa. The problem is when i want to play a video on a web browser. The browsers that support mp4 format (ie, chrome) display the video but ignore the rotation metadata. The same thing happens when i playback those videos with mplayer on linux.

The first solution that comes to mind is

ffmpeg -i in.mp4 -vf transpose=<rotation value> out.mp4

Is there a reason why browsers ignore rotation metadata? Is it a bug? Could i do something to fix this while recording the video?

Here are 2 sample from iOS and android respectively.

Thansk

ios video android video

Answer 1

Method 1: Rotate the HTML Element if the aspect ratio is not horizontal
Chrome HTML5 Video Flipping Portrait Sideways

Method 2: Re-encode the iPhone-Video
Displaying vertical videos with html5 on chrome

Method 3: Set orientation properly on iOS-Devices (Advanced)
iOS AVFoundation: Setting Orientation of Video

Method 4: Ask this guy if he has found an answer
Use FFmpeg to rotate the video based on its <rotate> metadata? Why does Android put the wrong metadata?