JW Player with Seeking with MP4 videos

I have just been working on getting JW Player working with seeking (so you can click somewhere in the video and go directly to it)

I managed to get it using psstream (PHP module) and H624 Streaming Module for Apache

Pretty simple process once you figure out what all the components are... (which is why I am listing them here - these are a instructions for non-commercial use)

I am running Ubuntu 8.04 with Apache/2.2.8 and PHP 5.2.4

PSStream

(as I am writing this I realise that the developer of psstream has discontinued development on psstream and has a new module called Loomiere Stream written in C that increases the performance of the module by approx. 6 times, this however is not publically available yet)

wget http://codeblog.palos.ro/downloads/psstream-1.0.tar.gztar -xvzf psstream-1.0.tar.gzcd psstreamphpize./configure --enable-psstreammakesudo make installsudo cp psstream.ini /etc/php5/conf.dsudo /etc/init.d/apache2 restartcp psstream.php /var/www/mywebsitedirectory/

H264

sudo apt-get install apache2-threaded-devcd ~wget http://h264.code-shop.com/download/apache_mod_h264_streaming-2.2.7.tar.gztar -zxvf apache_mod_h264_streaming-2.2.7.tar.gzcd ~/mod_h264_streaming-2.2.7./configure --with-apxs=`which apxs2makesudo make installsudo nano /etc/apache2/apache2.conf

Then add the following lines to the configuration (for all websites served off apache)

LoadModule h264_streaming_module /usr/lib/apache2/modules/mod_h264_streaming.soAddHandler h264-streaming.extensions .mp4

Then restart apache

sudo /etc/init.d/apache2 restart 

JWPlayer

JW Player is just installed on each page you want a video playing on, using Javascript

When you download the JW Player you should get a set of js and swf files if you include these in your HTML code

In the HEAD section

<script type="text/javascript" src="jwplayer/swfobject.js"></script>

In the BODY section

<div id='mediaspace'> </div><script type='text/javascript'>        var so = new SWFObject('/jwplayer/player.swf','mpl','470','320','9');        so.addParam("flashvars","image=videos/MyVideoFirstFrame.png&file=http://www.mydomain.com/psstream.php&type=video&id=videos/MyVideo.mp4&streamer=lighttpd");        so.addParam('allowfullscreen','true');        so.addParam('allowscriptaccess','always');        so.addParam('wmode','opaque');        so.addVariable('file','/videos/MyVideo.mp4');        so.write('mediaspace');</script> 

Well I think that is all for now. Pretty simple and straight forward, I will try and fix any mistakes if I find them.

Enjoy,

Niko

 

A working version is on the MiStats Mitel Call Accounting website

Posted