html - 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.