Chrome HTML5 Video Flipping Portrait Sideways

Question

I\'m building a site to display video recorded from an iPhone. The video comes in portrait orientation, at 288x352. Safari displays this video just fine, but in Chrome, the

Answer 1

This issue has been fixed as of 2 June 2016. Please refer the firefox bug here. This issue is not how Iphone encodes video, but is related to firefox supporting mp4 files but not the orientation metadata in the mp4 files.

Anyways, one can check if video file has Rotation using: exiftool -Rotation video.mp4

Note: For anyone, who still see this issue, this update is not yet available as my latest update didn't properly auto-orient the video. On careful look, the bug page says the target is mozilla49.

Answer 2

It's a bit ugly, but you could add -webkit-transform:rotate(90deg); to the style attribute of the video tag. However, this rotates your controls aswell.

I just streamed the video from AWS through VLC Player, and the video appears to be rotated 90 degrees anti-clockwise. Apple uses a metadata flag to indicate rotation instead of simply recording video in a different orientation. Unfortunately, many players/browsers will ignore this flag, including VLC and Chrome.

To fix the problem, you need to rotate the actual video file. You can do this by opening it in VLC Player, go to Tools > Effects and Filters. Click on Video Effects then Geometry. Enable Transform and select Rotate by 90 degrees from the dropdown menu. Click OK then just close VLC. The video should now be ready, although I can't test it on your page.

You may now need to remove the rotation metadata tag so that Safari will not rotate the video further. Again, I haven't tested this yet.

Answer 3

See this post on the videojs support forums which suggests that it's probably down to the way the iPhone encodes video since it includes information which QuickTime can read but other players cannot. The advice is that you encode the video on iOS using AVFoundation and rotate it. Presumably some other standard encoding library would work also.