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

Do you like HowtoForge? Please consider supporting us by becoming a subscriber.

Submitted by falko (Contact Author) (Forums) on Sun, 2007-08-19 18:52. ::

8 Installing FlowPlayer

Go to http://flowplayer.org/download and download the latest FlowPlayer version to your /tmp directory, e.g. like this:

cd /tmp
wget http://belnet.dl.sourceforge.net/sourceforge/flowplayer/flowplayer-1.19.zip

FlowPlayer comes in .zip format, so we must install unzip to uncompress it:

apt-get install unzip

Afterwards we can uncompress it:

unzip flowplayer-1.19.zip

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

<?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" data="/flowplayer/FlowPlayerThermo.swf"
    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}" />
</object>

</body>
</html>

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 (see http://flowplayer.org/documentation/quick+start); 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

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

then.

To learn more about all options that you can use in the <param name="flashvars"... line, take a look at http://flowplayer.org/config/variables.

Now it's time to test our setup. Direct your browser to http://192.168.0.100/flowplayertest.php or http://server1.example.com/flowplayertest.php, and your video should start to play in your browser (including sound):