Making professional splashes with HTML Skinning - Demo 2 / 10
Introduction
In Flowplayer the initial "splash image" can actually be any kind of HTML structure you want and it can be styled with CSS. In thid demo the splash consist of the actual image, play button and an info area that shortly describes the video being played.
Eating sushi on a Japanese Restaurant
duration: 20 seconds
Happy Feet dancing in the car
duration: 21 seconds
HTML coding
We are using DIV element as the player container. The video being played is given in href attribute. Althought this is non standard HTML it works on major browsers. Container has the play button and info area and the whole thing is styled with external stylesheet splash.css. The "splash image" is configured as the background image for the container.
<!-- first player -->
<div class="player"
href="http://blip.tv/file/get/KimAronson-TwentySeconds70930.flv"
style="background-image:url(/img/demos/70930.jpg)">
<!-- play button -->
<img src="/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://blip.tv/file/get/KimAronson-TwentySeconds58192.flv"
style="background-image:url(/img/demos/58192.jpg)">
<!-- play button -->
<img src="/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" />JavaScript coding
Our Flowplayer installation is plain and simple. Just relying on the defaults and nothing special.
// a very simple setup
flowplayer("div.player", "http://releases.flowplayer.org/swf/flowplayer-3.2.2.swf");
Take a look at a standalone version of this demo. View its source code to get things going on your page.