Video scales to square ignoring the aspect ratio in Safari (OS X)

Having the same problem. I guess the problem is the original format. I first upload .flv videos and doesn't had any trouble, but when I changed it to .mp4 then started to change aspect ratio. I will make some tests and let you know.

Have the same problem, any idea, someone, for a fix now?

I've encountered the same issue in Safari with MP4, but only under certain conditions.

I have an image field in the same node as the video that has 'MEDIAFRONT: IMAGE SETTINGS' set to one of my image cache presets, which acts as the 'Media Preview Image' for the OSM player, displayed before and after viewing the video.

This works fine, and the MP4 video plays at the correct aspect ratio, unless additional images are added to the node.

I have additional images in an image field in the node which is set to not be used by the OSM player (Media Preview Image= None / Media Thumbnail Image= none). When images are added to this field, even if display is set to hidden, The preview image doesn't show in the player, and the video when played, has the horizontal squished square aspect ratio.

Try removing any content from other file fields you have in the node, and see if this fixes the problem (not ideal, but that's what I'm doing for now, hoping to re-introduce the content to the page as a view of a separate node linked by the node_reference field).

I believe part of this bug is in Safari and how it handles the w3c spec for the placement of the media into the video box. Specifically, if the poster attribute is set for the tag and it's aspect ratio does not match the video's aspect ratio OR the tag is supplied with an erroneous value for the poster attribute (such as a 404), Safari will incorrectly compute the appropriate xscale from the video's height to produce the expected aspect ratio for the video and it basically defaults to 1:1 (a square).

Mediafront's inclusion of the poster attribute while inserting the HTML5 tag fails to perform appropriate checks on the poster image URL before including it in the markup.

I haven't tested all cases, but it's possible given the circumstances that if you have imagefields/imagecache presets being used by MediaFront for the "Preview Image" that don't match the aspect ratio of the video, you may encounter this bug in Safari. You may also encounter this bug in Safari if you have an imagefield that has multiple images stored in it, since it may be the case that the poster URL may not be formed correctly by MediaFront (this needs verification). As for why MediaFront would pick up an imagefield that is set to None/None, I have no idea. It could be that's where the main issue lies and that if it's set to none, you get an empty value image path passed along which is being prepended by the base URL which would result in a 404 as your poster image resource, and thus, again, you may encounter the bug in Safari.

The latter was the case I encountered. It seemed like in most of my tests, that the video didn't "squash" until the video resource had completed loading and the poster image then at that time was still not set properly and the failure would occur then.

Since I am simply using the first frame of the video as my "poster image", I simply set the preview

        html += preview ? ' poster="' + preview + '"' : '';

l+=m?' poster="'+m+'"':"";