Professional splash images with HTML
Eating sushi on a Japanese Restaurant
duration: 20 seconds
Happy Feet dancing in the car
duration: 21 seconds
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" />
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.11.swf");