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/

有帮助吗?

解决方案

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>

其他提示

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'
},
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top