HTML5 video poster image being shown sideways

Question

Anyone seen this before?

When I set the poster attribute to a fileURL using the following code, the images are sometimes sideways or upside down.

var showLocalThumbnailVideoInPlayer = function(file) {
    var URL = window.URL || window.webkitURL;
    var fileURL = URL.createObjectURL(file);
    var videoNode = document.querySelector('video');
    videoNode.poster = fileURL;
    videoNode.load();
};

The file is coming from an HTML input tag where the user selects the file from the local file system.

I am trying to get this to work on both iOS, Android, and Desktop with little changes between them (hence HTML5).

Thoughts about what's happening?

Answer 1

I figured out what was happening.

The EXIF data is ignored as per the HTML specifications and so the image needs to be rotated in memory first.