Flowplayer background image doesn't appear

Question

I'm using Flowplayer for a client's custom intranet, and content for a page is added using the CKEditor. There is no access to the site's HEAD in HTML), so I've been using inline CSS syntax.

The client is requesting that an image appear in the player area prior to clicking on play. Can I get a splash screen or poster using inline CSS only?

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

Nothing I've attempted so far displays the background picture. The player loads with a black background.

Here's a fiddle to play with it: http://jsfiddle.net/GuVbJ/

Answer 1

All you need to do is place an image inside of the flowplayer div. Flowplayer then uses the image as a splash screen. When you click on the image, the video will play.

Example

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

See jsFiddle

For more details about splash screen see flowplayer docs