Multiple Players on one page
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.
Here we have four player containers and each one is set up with a
CSS property and a nested image (the play button).
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.
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
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.
The above incantation may vary depending on the version of ffmpeg you have installed on your system.