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

Answer 2

CSS Only would be hard, you could lay a div over it with js and remove on play.

Answer 3

Flowplayer no longer offers a standalone player. Older versions are still available with a GPL v3 license, so here's a solution that doesn't rely on Flash:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowplayer/7.2.4/skin/skin.css">
<style>
   body {
      font-family: verdana, tahoma, arial, sans-serif;
      font-size: 14px;
      margin: 0;
      padding: 0;
   }
   #content {
      margin: 50px auto;
      max-width: 500px;
   }
   #css-poster {
      background-image: url(https://31.media.tumblr.com/tumblr_lrqfj1ELAQ1qzi2ewo1_500.jpg);
      background-color: #000;
      background-size: 200%;
      -webkit-transition: background 1s .5s;
      -moz-transition: background 1s .5s;
      transition: background 1s .5s;
   }
   #css-poster.is-poster {
      background-size: 100%;
   }
</style>
<div id="content">
   <div id="css-poster" data-aspect-ratio="47:25" class="flowplayer no-volume">
      <video>
         <source type="video/webm" src="https://edge.flowplayer.org/black/470x250.webm">
         <source type="video/mp4"  src="http://p.demo.flowplayer.netdna-cdn.com/vod/demo.flowplayer/bbb-800.mp4">
      </video>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowplayer/7.2.4/flowplayer.min.js"></script>

Here's the fiddle.