Multiple Players on one page

How to use multiple players in a single web page

standalone demo

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 above 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 activated (loaded) after being clicked. Previously loaded player is automatically unloaded. Flowplayer takes care of this on your behalf.

Its 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, skins, events or branding. Each player can be fully initialized before player loads. This technique allows you to make highly functional web pages with videos.

Player Containers

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

<a class="myPlayer"
    href="http://stream.flowplayer.org/KimAronson-TwentySeconds58192.mp4"
    style="background-image:url(/media/img/demos/58192.jpg)">
    <img src="/media/img/player/btn/play_large.png" alt="Demo video 1"/>
</a>
<a class="myPlayer"
    href="http://stream.flowplayer.org/KimAronson-TwentySeconds71844.mp4"
    style="background-image:url(/media/img/demos/71844.jpg)">
    <img src="/media/img/player/btn/play_large.png" alt="Demo video 2"/>
</a>
<a class="myPlayer"
    href="http://stream.flowplayer.org/KimAronson-TwentySeconds63617.mp4"
    style="background-image:url(/media/img/demos/63617.jpg)">
    <img src="/media/img/player/btn/play_large.png" alt="Demo video 3"/>
</a>
<a class="myPlayer"
    href="http://stream.flowplayer.org/KimAronson-TwentySeconds70930.mp4"
    style="background-image:url(/media/img/demos/70930.jpg)">
    <img src="/media/img/player/btn/play_large.png" alt="Demo video 4"/>
</a>
<br clear="all" />

HTML

Styling the players

You can see that each container above is assigned with a class name "myPlayer". The styles for the myPlayer class is below. Note that you can assign different classes to your players and style them differently.

section.blurb .box{
    padding:0;
}
/ styling of the container. /
a.myPlayer {
    display:block;
    width: 320px;
    height:240px;
    text-align:center;
    margin:15px;
    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;
}

CSS

Flowplayer Installation

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

flowplayer("a.myPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
    // this is the player configuration. You'll learn on upcoming demos.
    plugins:  {
        controls:  {
            volume: false
        }
    }
});

JavaScript

How Does it work?

The first argument takes a format tagName.className which will select multiple elements from the page using the specified CSS class name. This is the only special selector provided natively 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 generated with the FFMPEG tool using the following command line where 80 is the example seek position in seconds of the frame used as splash image.

ffmpeg -ss 80 -an -i my_movie.flv -f image2 -pix_fmt yuvj420p -vframes 1 -s 320x240 my_image.jpg

Bash