4

I'm building a simple page to display videos uploaded from my iphone using the html5 video tag.

if you're watching it with chrome you probably see this video is presented horizontal, although it's not- try to download it or watching it from safari (haven't tried another browsers).

I havne't found anything on the net mention this problem, is it a known chrome bug? does this tag any attribute that I can change to display it properly?

Thanks.

Edit: looks like this also happen in IE

shem
  • 4,686
  • 2
  • 32
  • 43
  • Just for future folks. IE11 looks to correctly orient the video of how it was recorded now, as well as Safari, but still looking for a better workaround for Chrome. – Ryan Hayes May 04 '14 at 21:57

2 Answers2

3

you could use style="-webkit-transform: rotate(90deg);" on the video tag along with a html5 compatible video player solution (otherwise you get rotated controls as well)

xception
  • 4,241
  • 1
  • 17
  • 27
  • It's ok, I don't use the controls anyway. and I only need it for chrome for now, so that's mean that I don't need to be worry about html5 compatible issues right? – shem Sep 17 '12 at 09:56
  • This solution not good enough because it won't work on video that flipped in 180 (apparently there is a problem on those too), guess I have to re-encode the video. – shem Oct 05 '12 at 14:25
1

It's an encoding issue from iPhones. I downloaded the video and it was still displayed horizontally using mplayer. There is more information here:

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

and as suggested you'll need to re-encode the videos using a library that uses a more supported standard encoding. (Or try to transform the video, on the page but that would be ugly)

Matt Whipple
  • 7,034
  • 1
  • 23
  • 34
  • Thx. I'm also the one that upload the video from iPhone, and I do know whether this video is horizontal or not, can I do something in the iPhone before I'm uploading it without re-encoding it? – shem Sep 17 '12 at 09:58
  • Maybe. Encoding would be something that is decently integrated into the software, so there's a chance you can't do anything but re-encode. http://stackoverflow.com/questions/2208522/ffmpeg-on-iphone-modifying-video-orientation: though you could likely find an only service that you could use as filter before you upload. There are several suggestions around (comments): http://www.youtube.com/watch?v=smVIRDfcEvU but they are targeting Quicktime so that may be a "fix" within the problem rather than affecting the problem itself. – Matt Whipple Sep 17 '12 at 11:31