Skinning kit

Flowplayer's default skin is designed to melt well into sites with varying design approaches and color schemes. But if you want to make it completely different you can do it wit our skinning kit.

There is a separate image for each of the buttons: play, pause, stop, fullscreen, menu, dragger, and the volume mute/unmute. The Flowplayer skinning kit can be used to change these images.

The skinning kit is available as a separate distribution package at SourceForge. You need to have a Java runtime and Apache Ant installed to use this kit. The kit has been tested to run on Java 1.5, Java 1.6, and Ant 1.7.0

The kit runs from the command line. CD to the directory where you unpacked the distribution package and run ant (just type ant and press enter). The generated player is placed in build/FlowPlayer.swf. By default it generates the default player with the gray skin.

To create your own skin replace the image files in the images directory. The names of the files are fairly self explanatory and there is some supporing comments in the included xml/Skin.xml.tmpl file.

The package runs out-of-the-box on Windows. To use it on Linux or Mac you need to replace the included swfmill binary with the version built for your operating system. Swfmill is availabe for download in their site.

Please refer to the README file included in the package for more info.

Anti-leeching

FlowPlayer can use authentication codes to protect against inline linking of video and image files. Inline linking is also known as hotlinking or direct linking. To implement this in your site you need to use a server side script/app that generates these authentication codes and stores them into a file called flowplayer_auth.txt. The player reads the contents of this file just before a protected clip is loaded and concatenates the contents to clip's file name.

So if the code stored in the authentication file is 'asdfln83yrojfalu3rl' and the clip's url is 'cars.flv' the player requests a file called 'asdfln83yrojfalu3rlcars.flv' from the server.

For this scheme to be effective the authentication code should change periodically (for example once in a minute). Additionally the server script/app needs to verify whether the incoming request contains a valid code and only serve the file if the code is valid.

The player reads the protection code only for those clips that are marked as protected in the playlist:

{ playList: [
	{ name: 'Skiing in Lapland, Finland', 
               url: 'skiing.flv', protected: true },
	{ name: 'Boating in the Amazon river', 
               url: 'river.flv' }
   ]
}

In the playlist shown above the first clip has the protected attribute and therefore protection is applied to it.

Full-screen mode

FlowPlayer supports native Flash 9 full screen mode. It is enabled by default.

The Flash plugin requires the allowFullScreen html tag attribute to be used to enable the full-screen mode. We also recommend using either Flowplayer flashembed or when embedding the player. Both will produce a working full screen mode among the other benefits they provide. Flashembed does not require the allowFullScreen tag to be explicitly specified, because it enables it by default. Please refer to the quick start for instructions.

The free FlowPlayer version shows a flowplayer.org logo in this native full screen mode. A version without the flowplayer.org logo can be purchased purchased from here. The commercial version also allows a custom logo to be configured and shown in the top-right corner of the video area.

Hardware scaling

The Flash plug-in supports hardware scaling of video. This nice feature provides high performance and CPU-friendly video scaling that is particularly nice for full-screen. Flowplayer supports this and you can enable hardware scaling in full screen like this:

		useHwScaling: true
	

Note that when hardware scaling is used also the player's control bar will be scaled. How much it will scale depends on how much it will have to scale the video in order to make it fit the full-screen size - it will also scale the control bar using the same ratio. Lot's of scaling will happen if your video's original encoded dimensions are really small and you are using a 24 inch monitor. In this case also the control bar will look quite big (which is nice since the user probably wants to view the full screen from a distance anyway).

Browser window based full-screen

FlowPlayer also supports full screen display using a maximized browser window that is opened using JavaScript. To configure this you should use FlowPlayer's useNativeFullScreen: false configuration option. To ensure that your configuration works correctly in this browser based mode, we recommend that you specify a baseURL parameter that points to the video clips hosted in your site. If the baseURL value is not specified the location of the FlowPlayer SWF file is used as the baseURL value. An alternative approach is to use complete URLs for every clip in the playlist (in this case the baseURL is ignored and the complete URLs are used).

You can also replace the default full screen page with your own. This is done via the fullScreenScriptURL parameter that you should point to your own JavaScript file that opens the correct full screen page. By default it uses this fullscreen.js script loaded from flowplaer.org.

Suggestions a.k.a. related videos

FlowPlayer has the ability to present a set of related videos after a video has been viewed by the user. After the video ends the player shows thumbnails of related videos together with metadata. You can see the suggestions in action in this demo page.

The player shows two suggestions at a time and the user can scroll through the suggestions using the navigation buttons. For each suggestion following information is presented:

• Duration is shown at the bottom of the thumbnail
• Name of the video
• Additional information

The additional information consists of key/value pairs returned by the server. The player does not associate any semantics to the key/value pairs shown as additional information - it faithfully shows whatever is returned by the server.

Configuration

To show suggestions for a clip in the playlist we use the suggestedClipsInfoUrl variable. The value should point to a URL that when requested returns the suggestion information that is needed to show the related clips. The playList configuration holding a clip with suggestions is as follows:

playList: [ 
   { url: { url: 'http://host.com/mainVideo.avi', 
      suggestedClipsInfoUrl: 'getsuggestions.php?clip=mainVideo.avi' }
   ]

Here the suggestions are shown for the main video (mainVideo.avi) and are fetched by requesting the URL getsuggestions.php?clip=mainVideo.avi. You can also include other clips in the playlist as usual.

Suggestion object

FlowPlayer expects to receive a JSON object after requesting the URL. The technology used to implement the JSON object generation can be PHP, Java, .net, etc. the player does not care as long as it gets the information in correct format, you could use a static file also. The format of the suggestion object is as follows:

{
baseURL: 'base_url_used_for_all_URLs_below',
clips: [
   { url: 'suggestion1.flv', name: 'Name for suggestion 1', 
      suggestedClipsInfoUrl: 'getsuggestions.php?clip=1',
      duration: 180, thumbnailUrl: 'Thumb1.jpg', 
      info: { viewed: 631, category: 'ads' } },
   { url: 'suggestion2.flv', name: 'Name for suggestion 2',
      suggestedClipsInfoUrl: 'getsuggestions.php?clip=2',
      duration: 180, thumbnailUrl: 'Thumb2.jpg', 
      info: { viewed: 2, category: 'sports' } }
  ]
}

The optional baseURL value is prepended to the clips' url and thumbnailUrl values contained in the clips.

Format of the clips array is exactly the same as in the playLists. As you can see the clips in the clips array can again contain the suggestedClipsInfoUrl variable so that an another set of suggestions will be shown when the corresponding suggestion has been played.

The suggestions don't necessarily have to be videos, the other supported clip types, images and SWF files, can be included as well. All the options that are available for the clips in playLists are also valid here.

Playing the suggested clips

If the clip returned in the suggestion object contains the url field, the player plays the clip in the same player instance.

Alternatively if you specify a linkUrl for the clip, it loads the linked URL into the browser instead of playing the clip in the same page/player. This is useful if the suggestion has it's own page that contains additional information for the suggested clip. The loaded page may contain it's own FlowPlayer instance that can be then used to play the suggestion.

linkWindow is used to control where the linked page gets loaded. It specifies the name of the browser window or frame into which to load the linked document. See the documentation of configuration variables for the available values in this field.

Google Analytics integration

You can collect statistics about your video playback using your Google Analytics account. FlowPlayer sends events to Google Analytics on specific events like the start of a video playback, end of playback, and so on.

You need a valid Analytics account go get started. Include the tracking JavaScript into your page like instructed in the Google Analytics pages. FlowPlayer uses this same script to send the event information to Google.

To enable analytics in FlowPlayer you need to use the googleAnalyticsPrefix configuration field. The value of this field specifies the base path for all the FlowPlayer specific events. So for example, when the player starts playing "sports.flv" and you configured the value of googleAnalyticsPrefix to "flowplayer", the event is counted as a pageview of "flowplayer/start/sports.flv" in the Google Analytics reports.

The page name to be sent to Google Analytics is constructed like so: googleAnalyticsPrefix/eventname/videoname.

The list of all event names is shown below. videoname is the file name of the clip as configured in FlowPlayer's playlist (just the name of the file, not the complete URL).

Here is a list of events that gets sent to Google Analytics:

• start, playback started
• finish, playback completed
• stop, playback stopped
• pause
• resume
• fullscreen, fullscreen mode initiated
• reduce, fullscreen closed

Flowplayer supports sending links to videos from the player. The email form is opened using the "Email to a friend" menu item found in the player's menu. If you don't customize this feature the player sends the message using a mail server hosted at flowplayer.org and the video is also shown on this Web site.

If you want to disable the email feature completely you can take out the menu item using the following setting in the configuration. Having zero in the sixth index here takes out menu item #6:

	menuItems: [ 1, 1, 1, 1, 1, 1, 0 ]

The player sends the email by posting the data of the email form using a HTTP POST request. This request should be processed in the server and routed to a mail server. Here are the POST parameters contained in the request:

The link to the video can be configured into the player and the player will include the link in the video post parameter:

	emailVideoLink: 'http://videosite.org/videos/videoId=100'

Below is a sample PHP script that processes the request and sends the email.

<?php
$headers = 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n";
$headers .= 'From: mailer@videosite.org' . "\n";
$headers .= 'X-Mailer: php' . "\n";

$title = $_POST['from'] . " just sent you a video.";
$message =  "<html><head>" . $title . "</head><body><br/>" . $_POST['body'] .
"<br/><a href='" . $_POST['video'] . "'>Click here to see it.</a>
</html></body>";
    
$mailSent = mail($_POST['toAddress'], $title, $message, $headers);

if ($mailSent) {
  echo("OK");
} else {
  echo("ERROR");
}
?>

Note that the script has to return either "OK" or "ERROR" as a response to the player. To configure the player to use this script add emailPostUrl to the player's configuration and make it's value to point to your script:

	emailPostUrl: 'http://videosite.org/sendmail.php'