Displaying vertical videos with html5 on chrome

问题

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

回答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)

回答2:

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)

来源：https://stackoverflow.com/questions/12409613/displaying-vertical-videos-with-html5-on-chrome