Фоновое изображение Flowplayer не отображается

Question

Я использую Flowplayer для пользовательской интрасети клиента, а контент для страницы добавляется с помощью CKEditor. Нет доступа к HEAD сайта в HTML), поэтому я использовал встроенный синтаксис CSS.

Клиент запрашивает, чтобы изображение появилось в области проигрывателя до нажатия на игру. Могу ли я получить заставку или плакат, используя только встроенный CSS?

<p>Here is a new sample video.</p> 
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script> 

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center; background-image:url('http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg');"></div> 
<script> 
    $f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", { 
     clip: { 
     url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4', 
     scaling: 'fit', 
     autoPlay: false, 
     autoBuffering: true, 
     provider: 'rtmp' 
     }, 
     plugins: { 
     rtmp: { 
      url: "flowplayer.rtmp-3.2.12.swf", 
      netConnectionUrl: 'rtmp://rtmp01.hddn.com/play' 
     } 
     }, 
     canvas: { 
     backgroundGradient: 'none' 
     } 
    }); 
</script>  

Ничего не предпринято, пока отображается фоновое изображение. Игрок загружается с черным фоном.

Вот скрипку, чтобы играть с ним: http://jsfiddle.net/GuVbJ/

Answer 1

Все, что вам нужно сделать, это разместить изображение внутри потокового проигрывателя div. Затем Flowplayer использует изображение в качестве заставки. Когда вы нажмете на изображение, будет воспроизводиться видео.

Пример

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js"></script> 

<div id="clip01" style="margin:0px auto; width:500px;height: 300px; text-align:center;"> 
    <img src="http://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg" alt="Bacon" /> 
</div> 
<script> 
    $f("clip01", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", { 
     clip: { 
      url: 'mp4:vod/demo.flowplayervod/bbb-800.mp4', 
      scaling: 'fit', 
      autoBuffering: true, 
      provider: 'rtmp' 
     }, 
     plugins: { 
      rtmp: { 
       url: "flowplayer.rtmp-3.2.12.swf", 
       netConnectionUrl: 'rtmp://rtmp01.hddn.com/play' 
      } 
     }, 
     canvas: { 
     backgroundGradient: 'none' 
     } 
    }); 
</script> 

См jsFiddle

Для получения более подробной информации о заставке см flowplayer docs

Answer 2

CSS будет только трудно, вы могли бы заложить DIV над ним с JS и удалить на игру.