Mp4 Video Rotation Metadata

Question

I developed a video sharing application for Android and ios that records video and uploads it to amazon s3. For compatibility android / ios mp4 recordings with H264 / AAC codecs.

Users can take a portrait or landscape and application, receive information from sensors, set file rotation (mediarecorder.setOrientationHint on Android and something similar on iOS)

IOS videos work great on Android and vice versa. The problem is when I want to play the video in a web browser. Browsers that support the mp4 format (i.e. Chrome) display video, but ignore rotation metadata. The same thing happens when I play these videos using mplayer on Linux.

The first decision that comes to mind is

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

Is there a reason the browser ignores rotation metadata? This is mistake? Can I do something to fix this while recording a video?

Here are 2 examples from iOS and Android respectively.

Thansk

video ios android video

Answer 1

Method 1: Rotate the HTML element if the proportion is not horizontal
Chrome HTML5 Scrolling video backwards

Method 2: transcode iPhone video
Display vertical videos from html5 to chrome

Method 3: set the orientation correctly on iOS devices (advanced)
iOS AVFoundation: adjust video orientation

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