I have a page that displays multiple videos using html video tags. The code looks like the below snippet:
<video controls="controls" class="vw" name="Video" src="videos/ACS_Video_2b.mp4"></video>
The class is simply a class that dynamically sets the width, height, etc.
The video looks and plays very nicely in all browsers except for Firefox. All of the videos on the website using these tags are upside down in Firefox. I can't seem to find anything online about people having similar problems. In fact, when I go to other websites using identical video tags and video extensions, etc., the video displays perfectly on their site for me in Firefox.
Here is the website with the upside down videos for reference:
http://www.larrykrannich.com/video.html
The videos display upside down locally, on a local server, and hosted on a real server.
Any help would be greatly appreciated.
This is a firefox problem, I have seen that several people have complained over and over about this problem but all to no avail. it only happens when the video is recorded from mobile, firefox doesn't seem to use the camera details to encoded rotation that came along with the mobile video. for the main time you have to figure out a fix for yourself, you can use css transform to rotate the video tag, but one problem with that is that it will rotate the video control with it.
you can use videojs, then add the rotate plugin, you can just google it. it will help rotate for video.
you can do something like this
if ( isfirefox ) {
<video class="video-js vjs-default-skin" controls preload="auto" width="270" height="360" data-setup='{ "plugins": { "zoomoomrotate": { "rotate": "270", "zoom": "1.4" } } }'>
<source src="video-source" type="video/mp4">
</video>
}
also, there is a recent issue in chrome update that compress mobile video as well. still looking for a fix for it