It appears that in Safari (tested on both windows and OSX) the html5 player can squash the actual movie to around half its actual width.

This occurs when no poster image is used and may also occur when the poster image used is a different size to the actual movie dimensions.

To fix this I created a poster image of the same dimensions as the video and this fixed the width issue.
As a permanent fix there could be a number of ways around this:
1) Have a default image that is always used as the poster even if the user doesn't upload one. This is then resized according to the dimensions set in the videojs admin section.
2) Use an image library to dynamically generate the image based on the admin movie dimension values. This could be good when you uploaded your video - it could display a number of images that could be set as the default poster (a bit like youtube).

Comments

DigitalFrontiersMedia’s picture

DigitalFrontiersMedia
Location Sarasota, FL
CreditAttribution: DigitalFrontiersMedia commented

Related issue: #926150: Video scales to square ignoring the aspect ratio in Safari (OS X)

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented
Status: Active » Postponed (maintainer needs more info)

Do you mean that this is a Safari issue?

DigitalFrontiersMedia’s picture

DigitalFrontiersMedia
Location Sarasota, FL
CreditAttribution: DigitalFrontiersMedia commented

I think that T1ckL35 is reporting this as a bug report when really what it should be is a Feature Request for this module for a workaround in this module to overcome an issue in Safari (where the bug actually lies).

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

That's what I thought. I was only wondering if T1ckL35 was still responding to this issue and if perhaps Apple has fixed this issue in a new version of Safari. Have you experienced the problem as well?

DigitalFrontiersMedia’s picture

DigitalFrontiersMedia
Location Sarasota, FL
CreditAttribution: DigitalFrontiersMedia commented

Jorrit, yes, I've experienced this issue and was quite confounded trying to figure out how it was happening. However, I experienced it with .mp4s with the MediaFront module (#926150: Video scales to square ignoring the aspect ratio in Safari (OS X)).

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

And you also experience that the bug only occurs when you have no poster image?

DigitalFrontiersMedia’s picture

DigitalFrontiersMedia
Location Sarasota, FL
CreditAttribution: DigitalFrontiersMedia commented

Just to be clear, I have NOT experienced this problem with VideoJS; I've not used VideoJS extensively on a site. I'm not sure if you're implementing this in any way differently than MediaFront or not, but I am guessing this is simply a Mac OS X Safari / HTML5 video tag issue and consequently is probably the same thing happening here. I simply came across this post when experiencing the same thing with MediaFront and thought I'd point out what I'd found.

From my previous tests (if I remember correctly), it occurs if the aspect ratio of the poster image attribute for the tag does not match the video's aspect ratio OR there is an error with the poster image file (i.e. 404, etc).

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

Is this still an issue with Video.js version 3 ?

nakie’s picture

nakie CreditAttribution: nakie commented

I can confirm Safari on Windows does this with Video.js Version 3.

I'm running Safari 5.0.5 and videos are around half size and will not start playing when clicked( not playing is present on the videojs website too so it could be a problem with <video> support or flashfallback in video.js ). In my case the videos are actually showing constrained by the parent div <div id="videojs-4-field-vid-video" class="video-js vjs-default-skin vjs-paused" width="300" height="150" style="width: 300px; height: 150px; ">

I have not tested this with a default image. I've been testing cross browser/device compatible options for a possible project, so I've been throwing test videos at a dev install and not uploading any images to go with them.

-Nathan

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

The code that you are posting suggests that you are not using version 2 of this module, which is required to use version 3 of the Video.js player.

nakie’s picture

nakie CreditAttribution: nakie commented

I originally installed 7.x-1.11, then read the section showing the breakdown and i wanted to test the flash fallback built in to video js. so I removed the 7.x-1.11 version and installed 7.x-2.0-rc1 along with video-js 3.x

after your comment I went back to verify I made the upgrade and cleared my cache just to be sure there is no residual effects from the old 7.x-1.11 install. I'm showing 7.x-2.0-rc1 installed, but since I am tinkering with a test setup it will not bother me to trash this one and start over. Unless the scenario I have here will be useful to you in some way.

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

I have installed Safari 5.1.2 on Windows 7 and I can't reproduce this problem. Can you give me a URL where you have this problem?

nakie’s picture

nakie CreditAttribution: nakie commented

The test site I have is still up but not on a registered domain. What's a good way to contact you and I will get you the info

To note running windows xp and safari 5.0.5 I see small videos. A coworker running an older safari 4 beta version on windows xp is seeing them normal size. I've not upgraded my safari yet to see if that changes any thing

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

Please use my personal contact form http://drupal.org/user/161217/contact .

Is there any particular reason why you are using Safari 5.0.5 and not the latest version?

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented

I have not received an e-mail from you, if I'm not mistaken. What's the status of this issue?

Jorrit’s picture

Jorrit CreditAttribution: Jorrit commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)

Closed because of lack of response.