Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flowplayer wrong aspect ratio in Flash

I'm using flowplayer for a website and it automatically chooses between the HTML5 and flash version depending on the browser capabilities. The problem I have is that when is Flash the video stretches to use the whole player, but in HTML5 is displayed correctly.

Here is how is showing in Flash (Firefox)

FlowPlayer Flash

And here in HTML5 (Chrome)

enter image description here

Is it possible to fix that issue?

I'm using this code in HTML:

<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf" class="flowplayer is-poster" data-ratio="0.416">
    <video preload="none">
        <source src="http://mysite/video.mp4">
    </video>
</div>

I just managed to replicate the problem in jsFiddle

http://jsfiddle.net/xtrPm/

like image 284
SERPRO Avatar asked Dec 02 '25 21:12

SERPRO


2 Answers

It turns out that buried waaaay deep within the settings is this:

http://flowplayer.org/docs/setup.html#config-options

flashfit: v5.3 whether video aspect ratio in Flash non-fullscreen mode is preserved. Only set this to true if the container's dimensions do not fit the video's aspect ratio, e.g. for playlists with clips of different aspect ratio. Note that setups with dynamic container resizing require the container to be of the same ratio as the video. The option also cannot deal with anamorphic videos as Flash is agnostic of a video's display aspect ratio.

http://jsfiddle.net/L2Exb/11/

<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf"
 class="flowplayer is-poster" data-flashfit="true">
  <video preload="none">
    <source type="video/mp4" src="http://encodable.com/uploaddemo/files/video/butterfly..mp4" />
  </video>
</div>
like image 77
roktechie Avatar answered Dec 05 '25 14:12

roktechie


I use this method to fix this problem.

clip: {
    url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
    scaling: 'fit', // this line make it work
    provider: 'hddn'
},
like image 32
Crazy Crab Avatar answered Dec 05 '25 14:12

Crazy Crab



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!