Remove Metadata from Encoded Video to Fix Orientation Issues

by in Developer Notes

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.

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:

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.

Leave a Reply

You must be logged in to post a comment.

Screenshot of video shot with iPhone at portrait orientation.

About Dana Hutchins

Dana is founder of Inforest Communications and has over fifteen years of Web design and development experience. Dana is involved in all aspects of business development and marketing of the firm, including serving as primary consultant on Internet and Web strategy to Inforest clients. His Web development responsibilities are primarily focused on writing custom modules,themes and plugins to make Drupal and WordPress sites run and look better. He also writes custom Web applications that have been used in online calendaring, e­-commerce and surveys.

Dana’s favorite programming acronyms are PHP, MySQL, CSS3, HTML5 and jQuery. However, what really gets him excited is the opportunity to use these tools to build Web sites that solve business needs and create new opportunities for his clients.