This is a message.

Professional splash images with HTML

Use styled HTML overlays on splash images

Play this video
Eating sushi on a Japanese Restaurant duration: 20 seconds
Play this video
Happy Feet dancing in the car duration: 21 seconds

standalone demo

The HTML overlay can be styled to your will with CSS. In this demo the splash consist of the actual image, a play button and an info area that shortly describes the video being played.

HTML

We are using a DIV element as the player container. The video being played is given in the href attribute. Although this is non standard HTML it works in all major browsers. Container has a play button and an info area. The entire experience is styled with external stylesheet. The "splash image" is configured as a background image of the container.

<!-- first player -->
<div class="player"
href="http://stream.flowplayer.org/KimAronson-TwentySeconds70930.flv"
style="background-image:url(/media/img/demos/70930.jpg)">
 
<!-- play button -->
<img src="/media/img/player/btn/play_large.png" alt="Play this video" />
 
<!-- info -->
<div class="info">
Eating sushi on a Japanese Restaurant
<span>duration: 20 seconds</span>
</div>
 
</div>
 
<!-- second player -->
<div class="player"
href="http://stream.flowplayer.org/KimAronson-TwentySeconds58192.flv"
style="background-image:url(/media/img/demos/58192.jpg)">
 
<!-- play button -->
<img src="/media/img/player/btn/play_large.png" alt="Play this video" />
 
<!-- info -->
<div class="info">
Happy Feet dancing in the car
<span>duration: 21 seconds</span>
</div>
 
</div>
 
<!-- let page float normally after this -->
<br clear="all" />

HTML

Configuration

Our Flowplayer installation is plain and simple. Just relying on the defaults and nothing special.

flowplayer("div.player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");

JavaScript