Multiple players on a same page Installation - Demo 3 / 5

Introduction

Absolutely killer feature of Flowplayer is the ease of installing multiple players on a page without any loss of performance. Have you ever opened a page with many simultaneous Flash video players being loaded? It is slow and frustrating. There is a reason why YouTube shows only one video per page. Flowplayer does not have those restrictions. This page has four players and the page is loading normally.

Click on following splash images on a the time. You can see automatic loading and unloading taking place.

You can install unlimited amount of players on a page and each one is acitivated (loaded) after being clicked. Previously loaded player is automatically unloaded. Flowplayer takes care of this on your behalf.

It's important to note that you have the ability to supply full configuration for the player before Flash is loaded. You can have different setups for each player on the page - be it plugins, skinnings, events or branding. Each player can be fully initialized before player loads. This technique allows you to make highly functional web pages with videos. Just take a look at Flowplayer home page and see those scrolling tabs. Each player is initialized with different settings and the page is quite complex. Hoever the page loads fast - really fast.

Player containers

Here we have four player containers and each one is setup with a background-image CSS property and a nested image (the play button).

<!-- player #1 -->
<a class="myPlayer" 
	href="http://blip.tv/file/get/KimAronson-TwentySeconds58192.flv"
	style="background-image:url(/img/demos/58192.jpg)"> 
	<img src="/img/player/btn/play_large.png" alt="Demo video 1"/> 
</a> 

<!-- player #2 -->
<a class="myPlayer" 
	href="http://blip.tv/file/get/KimAronson-TwentySeconds67463.flv"
	style="background-image:url(/img/demos/67463.jpg)"> 
	<img src="/img/player/btn/play_large.png" alt="Demo video 2"/> 
</a> 

<!-- player #3 -->
<a class="myPlayer" 
	href="http://blip.tv/file/get/KimAronson-TwentySeconds63617.flv"
	style="background-image:url(/img/demos/63617.jpg)"> 
	<img src="/img/player/btn/play_large.png" alt="Demo video 3"/> 
</a> 

<!-- player #4 -->
<a class="myPlayer" 
	href="http://blip.tv/file/get/KimAronson-TwentySeconds70930.flv"
	style="background-image:url(/img/demos/70930.jpg)"> 
	<img src="/img/player/btn/play_large.png" alt="Demo video 4"/> 
</a> 


<br clear="all" />

CSS styling

Each container is assigned with a class name "myPlayer". Here we have CSS definitions for that.

/* styling of the container. */
a.myPlayer {
	display:block;
	width: 320px;
	height:240px; 
	text-align:center;
	margin:0 15px 15px 0;
	float:left;
	border:1px solid #999;
}

/* play button */
a.myPlayer img {
	margin-top:70px;
	border:0px;
}

/* when container is hovered we alter the border color */
a.myPlayer:hover {
	border:1px solid #000;
}

Flowplayer installation

Here you can see another example of Flowplayer power. The process of installing the players is as simple as this JavaScript one-liner.

// a- tags with class "myPlayer" are transformed into video players
flowplayer("a.myPlayer", "/swf/flowplayer-3.1.5.swf");

Now the first argument takes a format tagName.className which will select multiple elements from the page by CSS class name. This is the only special selector provided navtively by Flowplayer API. If you want to make more complex selections from the page you should look at the Flowplayer jQuery support from Flowplayer JavaScript API.

Generating splash images

The splash images on the page were configured with FFMPEG tool with following command line argument.

ffmpeg -i my_movie.flv -f image2 -s 320x240 my_image.jpg

The command is not optimized in any ways. You can play with the tool and send us a better command if you like.