Thursday, August 23, 2007

Build Your Own Video Community With Lighttpd And FlowPlayer (Debian Etch) - Part 3

8 Installing FlowPlayer

Go to and download the latest

FlowPlayer version to your /tmp directory, e.g. like this:

cd /tmp


FlowPlayer comes in .zip format, so we must install unzip

to uncompress it:

apt-get install unzip

Afterwards we can uncompress it:


This creates a directory called flowplayer in the /tmp directory.

I'd like to have that directory in the document root of my

video web site (/var/www),

so I move it there:

mv flowplayer /var/www/

9 Configuring FlowPlayer

FlowPlayer is now installed, so all that is left to do is create an HTML file

that lets us watch our video. I will create a PHP file for this called

/var/www/flowplayertest.php which contains all parameters

to start FlowPlayer in the user's browser and which also

create valid video links for mod_secdownload:

vi /var/www/flowplayertest.php

$secret = "somesecret"; $uri_prefix = "/dl/";
# filename $f = "/video.flv";
# current timestamp $t = time();
$t_hex = sprintf("%08x", $t);
$m = md5($secret.$f.$t_hex); ?>
<html> <head> <title>Flowplayer Test</title> </head>

<body text="#000000" bgcolor="#FFFFFF"
link="#FF0000" alink="#FF0000" vlink="#FF0000">

<object type="application/x-shockwave-flash"
width="320" height="256" id="FlowPlayer">

<param name="allowScriptAccess"
value="sameDomain" />

<param name="movie" value="/flowplayer/
FlowPlayerThermo.swf" />

<param name="quality" value="high" />
<param name="scale" value="noScale" />
<param name="allowFullScreen" value="true" />

<param name="flashvars" value="config={videoFile: '
<?php printf('%s%s/%s%s', $uri_prefix, $m,
$t_hex, $f, $f); ?>', streamingServer:
'lighttpd', loop: 'false',
useNativeFullScreen: true}" />
















It's very important that $secret has the same value than secdownload.

secret in /etc/lighttpd/lighttpd.conf. Also, $uri_prefix and secdownload.

uri-prefix must match. If this is fulfilled, the above script will generate valid links

. $f must hold the filename of the FLV video, beginning with a slash (/).

(The filename is hard-coded in the above example,

but of course you can program whatever you like to

dynamically generate the filename.)

The <object></object> stanza contains the FlowPlayer configuration.

FlowPlayer comes with some different skins


I like the FlowPlayerThermo skin most, so I use that.

Our FLV video has a size of 320x240px (see chapter six),

and the control bar of the FlowPlayerThermo skin has a height of 16px.

Therefore I specify a width of 320px and a height of (240 + 16 = 256)px.

If you use another skin, adjust the height appropriately.

In the <param name="flashvars"... line we can configure the

behaviour of FlowPlayer. The most important setting is the videoFile

setting (which is set by PHP in the above script) which specifies

the path to the FLV video.

Another important setting is streamingServer: 'lighttpd'

which causes the video to be streamed through lighttpd's

mod_flv_streaming module which allows better support for long videos.

The other two settings (loop, useNativeFullScreen) are

optional in this setup. However, if you set useNativeFullScreen

to true (adds support for native Flash 9 full screen mode),

you must also include the line

<param name="allowFullScreen" value="true" />

in the <object></object> stanza, and you cannot use

<param name="wmode" value="transparent" />


To learn more about all options that you can use in the

<param name="flashvars"... line, take a look


Now it's time to test our setup. Direct your browser to or,

and your video should start to play in your browser (including sound):

This is how the native Flash 9 full screen mode looks:


No comments: