Fixing HTML5 Video Portrait Orientation with Adobe Media Encoder

Posted on by Dana Hutchins

Ran across an issue today with HTML5 video tags and Internet Explorer and Firefox on Windows.  According to Microsoft, Internet Explorer (and I think any other browser running on Windows) will automatically orient the image based on the metadata of the device used to record it.  Supposedly, this would mean that if you record a video on your iPhone in portrait orientation, the resulting playback on Windows will also be in portrait mode.

However, this wasn’t the case when we were posting an HTML5 video with portrait orientation for a client.  While the video was obviously shot in portrait, Windows was insisting to show it in landscape format.  Bummer!  The solution, however, ends up being the same regardless of what is causing orientation issues: re-encode without the original metadata.  That way, without the metadata telling Windows the orientation of the video, it will respect whatever orientation it is presented with.

There are threads here and here on StackOverflow which discuss the issue and offers a solution to fix the issue in iOS which identified the problem,  In my case, the solution was to 1) specify the final height and width of the video to that of the original and 2) remove the original metadata when encoding the MOV file to MP4.  Here is how to do it:

After clicking “Settings…” on the main Adobe Media Encoder Queue window, you will be able to set export settings for your video.  Look for the “Video” tab and “Metadata…” buttons, these are where you will make changes.

adobe_media_encoder_metadata_video

Under the “Video” tab, set the frame width and height to match that of the original file.  In this case, it will be a Frame Width of 320 pixels and Frame Height of 568 pixels, matching that of the Source, which is described in the area right above the Video tab.  This will automatically change the Preset field to “Custom”

Next, click the “Metadata..” button to edit the way metadata is encoded in your exported video:

adobe_media_encoder_export

Under “Source Metadata” set “Preservation Rules” to “Exclude All.”  This takes out all of the original metadata from the original file when encoding.  There may be a more fine-toothed setting to take out the orientation setting, but I couldn’t find it a first glance.

After these settings are made, you can start your queque.  The resulting exported video won’t have orientation metadata to be misinterpreted and display in the proper portrait format.