9

I have html5 video tags of videos. On chrome all is good, on firefox the orientation of landscape videos is wrong...

Even tried using video.js, no change.

I read that this is a problem because the videos originated in iOS.

so 2 questions: 1. How can I still overcome this issue. Really there is no solution? 2. (out of curiosity) - how does chrome manage to overcome this?

Example of a URL (scroll down a bit in the chapters to see a vertical video):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22

Boaz
  • 4,864
  • 12
  • 50
  • 90
  • Are those videos ALWAYS in portrait mode? Or sometimes landscape, sometimes portrait? – Foaster Jul 14 '15 at 20:07
  • 2
    The web page you linked is 67 MB, and the main page of [letsfeedme.com](http://www.letsfeedme.com/) is 131 MB and takes 70 seconds to load. This is before I click play on any of the videos. Just curious - how much is that site costing you on CloudFront? I personally cost you about 2 cents by visiting each of those pages once. – Maximillian Laumeister Jul 18 '15 at 00:55
  • @MaximillianLaumeister - basically you are right. There are a lot of considerations that make it OK for now (SO comment is not the place to discuss it) - the main "problem" are the videos - I'm doing a play/pause for all to overcome a chrome caching bug. The landing page will change soon... – Boaz Jul 18 '15 at 09:21
  • 1
    If it plays properly in Chrome and VLC (according to other comments) it could be a bug in Firefox. The best solution is to send a bug report to Mozilla (https://bugzilla.mozilla.org/). But please, use a test page isolated and easy to load, not the 131 MB link. Mozilla guys are very busy and they will ignore you otherwise. – earizon Jul 19 '15 at 10:10
  • This issue has been resolved. See my answer [here](http://stackoverflow.com/a/38228475/1874627). – saurabheights Jul 06 '16 at 16:02
  • 1
    I opened the bug back in the day :) – Boaz Jul 06 '16 at 16:16

4 Answers4

4

I read that this is a problem because the videos originated in iOS.

All videos recorded using mobile devices will contain rotation metadata including those from iOS and Android devices. It can take 4 values: 0 (tilted left), 90 (portrait), 180 and 270:

enter image description here

On chrome all is good, on firefox the orientation of landscape videos is wrong...

Firefox and IE 10 are the only major browsers not supporting the rotation metadata. Here's Firefox compared with Chrome:

enter image description here

The latest version, Firefox 42 as of today, still does not support it. IE11 and Edge 12,13 do support it.

List of mobile/desktop players that support the rotation info: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/

How can I still overcome this issue. Really there is no solution?

See this answer for the solution, basically you need to :

  1. rotate videos using FFmpeg (so Firefox and other browsers that do not support the rotation metadata show the video properly)
  2. remove the rotation metadata (so that other players don't rotate the video since it's already been rotated by FFmepg)

Images courtesy of: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/

octavn
  • 3,154
  • 32
  • 49
  • The Mozilla/Firefox bug report for this issue has been getting a lot of activity lately https://bugzilla.mozilla.org/show_bug.cgi?id=1228601 – octavn May 30 '16 at 13:29
3

I am guessing that Chrome is respecting the width="360" and height="640" attributes of your <video> tags, while Firefox is not. If I download one of your videos and play it back in Media Player Classic, again the orientation is incorrect. But just like in web browsers, there are inconsistencies: the same video opened in VLC player plays back with the correct orientation.

I would recommend that, if you can, you re-encode the videos using a (free) program called AVIdemux. I just tried it on one of your videos, and it worked well with minimal effort. As a bonus it shrunk your video down considerably, with only minimal quality loss.

Here are the steps:

  1. Download AVIdemux from http://www.fosshub.com/Avidemux.html
  2. Install and run AVIdemux
  3. Go to File menu and choose Open. Pick the video to re-encode.
  4. Go to Video menu and choose Filters
  5. Choose Transform > Rotate (double-click) > Rotate by 270 degrees (OK)
  6. Click the Preview button to check the output
  7. Click the Close button
  8. In the main window, under Video Output, choose MPEG4-AVC (x264)
  9. Under Output Format, choose MP4 Muxer
  10. Click the Save Video icon, and in the resulting window type a filename and click the Save button.

Then you will need to re-upload your video.

Jimadine
  • 998
  • 13
  • 26
  • Yeah... The problem I need some sort of automatic solution. The users upload videos all the time... – Boaz Jul 12 '15 at 12:29
  • Ah, okay. That's unfortunate ;( – Jimadine Jul 12 '15 at 19:38
  • That's because **Media Player Classic does not support the rotation metadata** in video files while VLC does. See the [list of players supporting the rotation metadata](https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/) . FFmpeg could be used to automate the rotation process though. – octavn Nov 17 '15 at 11:50
  • To hell with you. I followed all your steps and got the error: The video seems to be incomplete. – doABarrelRoll721 Apr 21 '16 at 21:29
3

Since the problem is with some iOS specific encoding options, which many NOT-Apple Players can't read, the easiest solution I can think of is to trancode and rotate the video.

Which was already discussed in oh so many posts on the web and here at SO... e.g.:

Video orientation using video.js

HTML5 mp4 video with firefox resizing video

Chrome HTML5 Video Flipping Portrait Sideways

http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong

Community
  • 1
  • 1
Foaster
  • 658
  • 5
  • 13
  • There are no iOS _specific_ encoding options (the [rotation metadata](http://stackoverflow.com/a/33756136/813988) is saved with Android videos as well) and most players do support that metadata (see [list](https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/), Firefox does not) but your solution to rotate the video is right if coupled with the removal of that rotation info (see [my answer](http://stackoverflow.com/a/33756136/813988)). – octavn Nov 17 '15 at 11:55
1

Probably not really a viable solution but adding a CSS rule such as 

video {
 -moz-transform: rotate(90deg);
}

would at least make the videos play back in the correct orientation in Firefox. Problems with this:

  • videos that play back in the correct orientation without the rule will play back in the wrong orientation with the rule

  • the video controls also get rotated

  • the posters will display in the wrong orientation

I see your site uses video.js. It might be worth looking at https://github.com/xbgmsharp/videojs-rotatezoom ?

Jimadine
  • 998
  • 13
  • 26
  • I saw this solution. The rotated controls look ridiculous, not a real solution :( rotatezoom uses the same technique as I see, right? – Boaz Jul 13 '15 at 06:09
  • No, not a real solution. I tried playing around in Jquery e.g. $("video").removeAttr("controls").css("-moz-transform","rotate(90deg)").attr("controls","controls") but didn't help rotate the controls into the correct position. Aside from modifying the iPhone app to set the correct orientation, I'm out of ideas. Sorry I can't be of more help. – Jimadine Jul 13 '15 at 18:23