Flowplayer Version 3.0 Jun 30, 2008
Release notes
First release of Flowplayer was released in March 2005 and during these three and a half years we have gathered experiences and envisioning how things should be for web videos. And finally it's time for Flowplayer 3.0 - simply the best video player for web. Why? Well ...
We started from scratch and set our bars high. We opened our minds and took the recent achievements in ActionScript and JavaScript. Here is a list of our goals and what are now features of Flowplayer 3.0.
Installation and configuration
Flowplayer is now much easier to use and understand. If you just want to play a file you can do this
flowplayer("myDiv", "flowplayer.swf", "my-movie.flv");
Or if you want to install multiple players on your page you could do this.
flowplayer("a.myClass", "flowplayer.swf");
This will install Flowplayer inside each A- tag that has "myClass" defined as their class name. And video file is taken from anchor tags "href" attribute. This "unobtrusive" way of coding embraces HTML standards so that clients that do not support JavaScript or Flash may still be able to see the video.
Flowplayer configuration is no longer just a flat list of configuration variables. It is now logically categorized. For example all skinning related materials are now nested under the same object.
Plugin architecture
In Flowplayer everything is a plugin. Plugins can be can be moved, resized and animated. You can load and remove plugins on the fly and everything is scriptable. Even video screen and controlbar are plugins. There are three kind of Flowplayer plugins
- Flash plugins that are contained inside the player
- JavaScript plugins that enrich the video experience outside the player
- Streaming plugins that can read video data from different sources. These are not visible but they do important job on the background.
There are a couple of plugins already done and you are expected to see more to come. It's not that hard to make your own plugins and there are documentation to get you started. Plugins are fully scriptable with JavaScript. You can for example do following.
// load a "content" plugin that can be used to place HTML over or beside video screen
flowplayer().loadPlugin("content", "flowplayer.content.swf", {top:10, opacity:0.8});
// animate video screen so that it halves it's size in 1000 milliseconds
flowplayer().getScreen().animate({width:'50%'}, 1000);
// use a JavaScript based playlist plugin
flowplayer().playlist("#myPlaylist");
Events
In Flowplayer 3 events are taken seriously. They are the building blocks for plugins and they are at the heart on extending player functionality. Most importantly they made so easy that even novices can take advantage of them. Concider this:
flowplayer("myDiv", "flowplayer.swf", {
clip: {
url: 'my-movie.flv',
// each time movie starts this JavaScript function is called
onStart: function(clip) {
// do something usefull such as send clip's URL to Google Analytics
pageTracker._trackPageview(clip.url);
}
}
});
As you can see Flowplayer configuration can contain JavaScript functions as well. These functions can do anything you want such as launch plugins, manipulate surrounding HTML document (DOM), use powerfull libraries such as jQuery, communicate with server using AJAX .. it's all about your imagination (and coding skills).
Multiple instances
Flowplayer is build from the ground up so that you may have many simultaneous instances on the same page at once and you can easily manipulate those instances. Each one can have their own configuration, event listeners and plugins running. There is no reason to actually play two or more videos at the same time. Althought this is possible it is both annoying and performance heavy. You should rather use splash images in place of the video.
Loading a video means replacing the splash image with the player and unloading is the opposite - resuming the video back to the splash image. Flowplayer is build around these concepts. You can setup players on the page with different configurations and plugins without any Flash component. After that each player is loaded when user clicks on them and previously running player gets automatically unloaded. You can also load/unload players by scripting. Here are few examples:
/* $f is a shortcut to flowplayer */
// unload currently running video
$f().unload();
// load player contained inside "myDiv"
$f("myDiv").load();
// do something with the third player when it is loaded
$f(2).onLoad(function() {
this.getScreen().animate({width:'100%'});
});
JavaScript API
load() and unload() functions are example methods in Player object and there are other objects too such as Clip and Plugin. What this means that we have an object oriented API for a Flash component. This is something new to Flash and JavaScript developers since Flash components typically offer just a flat list of functions. For example you can do something like this.
// methods return objects that return objects and so on
$f().setVolume(50).seek(40).onFinish(function() {
// Flowplayer uses a lot of anonymous functions, such as this
alert("playback finished " + this.getVersion());
});
jQuery support
If you don't know what jQuery is that's not a problem. But if you do you may be somewhat experienced JavaScript developer and know how useful it is when developing cross browser JavaScript applications. Flowplayer has a support for that library and you can do things like these
// select all links that has a .flv suffix and make them playable with flowplayer
$("a[@href*=.flv]").flowplayer("flowplayer.swf");
// return all players that are contained in div's inside div#myPlayers
$("div#myPlayers div").flowplayer().each(function() {
// this- variable points to a current Player instance
alert(this.getVersion());
});
Future compatible
Nowdays JavaScript is gaining more and more attention and people are taking it more seriously. Libraries such as jQuery are a proof of it's power. Google's new Chrome browser has made an effort on boosting JavaScript performance to a next level and Firefox is doing the same in it's upcoming version 3.1. There are even rumors that there will be a video engine powered by JavaScript.
What this means that we are focusing our development to the JavaScript API in a way that the video engine can vary. At the moment we are using Flash solely for the reason that it's installation base is nearly 100% of all clients and it has very good video capabilities. If Windows Silverlight will gain popularity we could write an engne for that without changing the JavaScript API. Same goes for HTML5 and it's plans for video support.
New website
Our new website defines now more clearly who we are and what we do. Our global navigation is fixed and not expected to change very soon. First and foremost we are developing a video player for web - a rather good one. That's our job. We are not heading ourselves to any other direction. For example you are not expected to see any advertising solutions, web is already bloated with them. What you will see is the future of web videos.
And of course we have a new look and Flowplayer logo. They have been designed by our fellow Janne Lehtinen from woop.fi.
Forums
This is quite ambitious attempt to make a high quality discussion forum with latest JavaScript techniques. It is heavily dependent on AJAX and jQuery. We look forward on developing it more. It is separated from old forums because the configuration and player architecture is totally different and it will make our forums more messy if it contains stuff from earlier version.
Downloads and support
If you end up buying a commercial licence two things are setup for you.
- a download page where you can download your releases and get future upgrades
- access to support area
Support area is a highly requested feature. People want to get more personal support so that we can share URL's to problematic websites without making them publicly available. And some customers just want more personalized support than forums. Depending of the age of previous commercial and unrestricted license we are giving 0 - 4 support items for our users.
However our main area of maintaining continuous discussion is still Forums.