3

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/

SERPRO
  • 10,015
  • 8
  • 46
  • 63

2 Answers2

4

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>
roktechie
  • 1,345
  • 1
  • 10
  • 15
  • thanks for your new answer. Do you know how to set the scaling property in flowplayer? the documentation is not very clear, and I can't make it work. I tried the example from the link you posted and it's the same: http://jsfiddle.net/L2Exb/1/ – SERPRO Oct 09 '13 at 09:21
2

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'
},
Crazy Crab
  • 694
  • 6
  • 16