2013-09-30 7 views
3

Я использую flowplayer для веб-сайта и автоматически выбирает между версией HTML5 и флэш-памятью в зависимости от возможностей браузера. Проблема заключается в том, что когда Flash является растянутым, видео растягивается, чтобы использовать весь плеер, но в HTML5 отображается правильно.Неправильное соотношение сторон Flowplayer во Flash

Вот как показывает в Flash (Firefox)

FlowPlayer Flash

А вот в HTML5 (Chrome)

enter image description here

Можно ли решить эту проблему?

Я использую этот код в 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> 

Я только что удалось воспроизвести проблему в jsFiddle

http://jsfiddle.net/xtrPm/

ответ

4

Оказывается, что похоронил Waaaay глубоко в настройках это :

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

flashfit: v5.3 сохраняется ли соотношение сторон видео во флэш-режиме без полноэкранного режима. Только установите для этого значение значение true, если размеры контейнера не соответствуют формату видеоизображения, например. для плейлистов с клипами разного формата. Обратите внимание, что настройки с динамическим изменением размера контейнера требуют, чтобы контейнер имел такое же отношение, что и видео. Опция также не может работать с анаморфными видеороликами, поскольку Flash не зависит от формата отображения видео.

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> 
+0

спасибо за новый ответ. Вы знаете, как установить свойство масштабирования в flowplayer? документация не очень ясна, и я не могу заставить ее работать. Я попробовал пример из ссылки, которую вы опубликовали, и это одно и то же: http://jsfiddle.net/L2Exb/1/ – SERPRO

+0

'data-flashfit =" true "' сделал трюк! Благодаря! – SERPRO

2

Я использую этот метод, чтобы решить эту проблему.

clip: { 
    url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4', 
    scaling: 'fit', // this line make it work 
    provider: 'hddn' 
},