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 video is flipped into landscape mode, 352x288. My head is sideways. :-(

Here's the page in question: http://aaron.tiberiuslog.com/B4F4CC56-172E-4D84-9656-BE04E6E475A0

And here's the video itself if that helps.

http://tiberiuslog.s3.amazonaws.com/output_D7DB78A9-8019-4D09-9B22-EB8738F844BB-2380-000001530B13BE09.mov

I've tried using vanilla HTML5 markup, and have now added VideoJS, though it made no difference for this issue.

Update: I have half an answer to my question now. It appears that there needs to be some encoding option set on the device to ensure proper orientation is respected on all viewers,including VLC and Chrome (for example). This question doesn't have the legs to get that answer, so I've created a new one. Hopefully we'll string together the proper solution for this issue!

Update 2: I have discovered the answer! The other question I posted led me to the technique for correctly encoding the video on iOS.

Answer 1

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.

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

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.