Initial splash image Installation - Demo 2 / 5

Introduction

Here you can see a setup where the Flowplayer instance is not activated until the user clicks on the image. Click on the following splash image to see how this technique works.

Benefits

There are several benefits when using this technique:

• Your pages load faster. Flash components require some processing power from your computer when they are being initialized. Images are much faster - browsers are highly optimized for displaying them.
• In place of the video you can supply content that search engines understand. A convenient way is to supply this in the IMG tag's alt attribute.
• You can install an infinite number of players on a page without any loss of performance. Take a look at the next demo for installing multiple players on a page.
• You can visualize your videos with high quality images before they are viewed.

If you have lots of videos you can use FFMPEG to grab images from your video file without the hassle of making a doing all that work manually.

The player container

This setup is identical to the minimal setup with one important exception. There is HTML placed inside the container as follows:

<!-- setup things like in the minimal setup  -->
<a href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv" id="player"
	style="display:block;width:425px;height:300px">

	<!-- specify a splash image inside the container -->
	<img src="/img/home/flow_eye.jpg" alt="Search engine friendly content" />

</a>

This technique is called a "splash image". This is a bit misleading because you can place any HTML inside the container - not just an IMG tag. You can also use a background-image CSS property for the container. This gives you powerful skinning possibilities as shown in these skinning demos.