This is a message.

Scripting

Flowplayer has a truly exceptional JavaScript programming API that can also be used in skinning. Almost all skinning parameters can be dynamically changed during the video playback. All of these methods are documented in the JavaScript API but here we have gathered a few skinning related API calls in a single page for your convenience.

Controlbar

The logo can also be threaded as a “plugin”. All of its display properties can be dynamically changed.

You can change every single display and styling property of the controlbar with scripting. Here are few examples:

// dynamically change the background image.
$f().getControls().css({background: 'url(/img/player/skin_stripes.png)'});
 
// change multiple settings at once
$f().getControls().css({
backgroundColor: "#cccccc",
borderRadius: 10,
 
// you can specify a gradient
backgroundGradient: [0.9, 0.4]
});
 
// move the controlbar to the top edge of the player
$f().getControls().animate({top: 0});

JavaScript

TIP: If you are using Firefox and have the Firebug Add-on installed, then you can try the above examples yourself against every possible Flowplayer demo on our site.

The logo can also be threaded as a "plugin". All of its display properties can be dynamically changed. So it can be moved, resized and its opacity can be changed at runtime. For example:

// get handle to the logo
var logo = $f().getPlugin("logo");
 
// move logo behind the video screen
logo.css("zIndex", 0);
 
// gradually show logo over 10 seconds
logo.fadeIn(10000);

JavaScript

Screen

The same thing is true for the screen. All of its display properties can be dynamically changed:

// minimize screen to the upper left corner
$f().getScreen().animate({width: 100, height: 80, left: 0});
 
// gradually fade out the screen in 5 seconds, possibly revealing a
// logo under it
$f().getScreen().fadeOut(5000);
 
// execute a function after an animation finishes
$f().getScreen().fadeOut(5000, function() {
// now we can do things after the animation
this.getPlugin("logo").animate({height: 200, width: 200});
});

JavaScript

Loading plugins

Here is a demo that loads a random SWF file under the screen after it is minimized to the upper-right corner of the player. Press play and wait for 3 seconds.

See Abobe's demo about loading Flash objects. As you can see there are many things that can be done with the API that have not yet been explored.