Streaming FLV videos #2

November 27, 2008 by Samantha Halfon · 1 Comment
Filed under: Computing, Internet 

Streaming, real streaming, is different from downloading then playing a video. Which means that it enables two things:

  1. starting to watch the beginning of the video while the rest of it is buffering
  2. being able to seek any point in the video, forward or backward

The Flv format makes number #1 possible out of the box. Even without using a real streaming server, when watching an flv video using the flash player, you can start watching while the rest is being buffered. The seeking feature on the other hand requires a streaming server… unless, you emulate one using a server side script.

I’m going to detail how I’ve setup a “http emulated streaming server” using xmoov.php as server-side script and jwmediaplayer as client video player in the browser.

Download the server side script from xmoov.com and edit it.

Edit the following information

define(‘XMOOV_PATH_ROOT’, ‘/home/www/streaming/’); //path to your main web folder
define(‘XMOOV_PATH_FILES’, ‘movies/’); //path from your root folder (above) to the one containing the movies
define(‘XMOOV_CONF_LIMIT_BANDWIDTH’, TRUE);
define(‘XMOOV_CONF_ALLOW_FILE_CACHE’, FALSE);

The following information are to be set according to the bitrate of your videos.Let’s say your bitrate is 512Kb/s. You need to make sure your streaming setup provides your client with 512 Kb a second. To do so, you can send packages of 50kb every tenth of a second or you can send 100 every twentieth of a second. Of course, the network never being perfect, you should also give yourself some margin. Below are the values I chose:

define(‘XMOOV_BW_PACKET_SIZE’, 110); //defines the package size
define(‘XMOOV_BW_PACKET_INTERVAL’, 0.2); //deines the interval
define(‘XMOOV_CONF_ALLOW_DYNAMIC_BANDWIDTH’, TRUE); // enable the feature

Finally to make xmoov work with jwplayer, edit the following:

define(‘XMOOV_GET_FILE’, ‘file’);
define(‘XMOOV_GET_POSITION’, ‘start’);
define(‘XMOOV_GET_AUTHENTICATION’, ‘key’);
define(‘XMOOV_GET_BANDWIDTH’, ‘bw’);

To make sure that your streaming server works, you can browse to http://<your server>/xmoov.php?file=<filename>&start=0. The browser should try to download an flv file. If so, the streaming server is set.
Now, you need to make your jw player comply to this by adding &streamer=<path to xmoov.php> to your Flash Parameters. Here is an example of code:

var so = new SWFObject(‘jwmediaplayer/player.swf’,'mpl’,’560′,’420′,’9′);
so.addParam(‘allowscriptaccess’,'always’);
so.addParam(‘allowfullscreen’,'true’);
so.addParam(‘flashvars’,'&file=jwmediaplayer/playlist.xml

&backcolor=000000&frontcolor=ffffff&playlistsize=280

&streamer=lighttpd&playlist=over&autostart=true&streamer=xmoov-streamer.php’);
so.write(‘player’);

That’s all there is to it. Now, using jw player, you should be able to seek any point of your video. To see this in action, you can of course watch the videos on our website. For more information, you can visit the wiki of the jw player regarding the http steeaming.

We are still interested in finding out more about streaming videos. If you come across a better solution that can be installed easily on a host server, let us know in the comment. If you find better settings for xmoov.php, we’d be glad to hear about it too.

First time on World Wide Angle, you may want to subscribe to our RSS feed. Thanks for visiting!

Streaming FLV videos #1

November 25, 2008 by Samantha Halfon · 2 Comments
Filed under: Computing, Internet 

Adobe Flash Player logoAs we were building our website for World Wide Angle these past two weeks, we looked at the available solutions to show videos online. It didn’t take long for us to pick flash as a format for three main reasons:

  1. Since Adobe Flash 9, the quality of the FLV video has increased while the file size drastically decreased makin it easier to share this format online
  2. Adobe Flash player is widely accepted and installed on about 95% of the computers in the world and run on the most mainstream systems: Windows, Mac and Linux
  3. Adobe Flash is supported on more and more handheld devices

I’m not sure it’s a reason but the FLV format was also chosen by video sharing platforms like youTube and DailyMotion.

The second step was to choose which player to use. We wanted a good looking and an easy to use interface. We wanted the possibility to display a list of available videos and possibly some information about them. We also wanted the interface to be customizable if possible. And, as I like to look at the code a bit (can’t learn too much), I was leaning toward an open source solution. After some research, we elected the JWPlayer which claims to be the most used video player on the Internet.

What can you do with the JWPlayer:

  • easily place your videos online (the jwplayer site offers a wizard to get you started)
  • customize the size about your player
  • customize the controls
  • add a logo to your player
  • enable or not the autostart of the video playback
  • easily customize the main colors of the interface
  • enable streaming if you have a server for it
  • enable http streaming emulation using a server side script
  • share several independant videos clips
  • or share a single videos as several “chapters” in a way similar to a dvd with its menu
  • skin the player
  • add or even develop plugins
  • play a youTube playlist
  • play the playlist coming from a RSS feed

Considering the player can be extended via plugins and that the code is open, there are probably a lot more features that could be added to this list but these are the features that made us pick this player.

You can see the player in action on our main page http://www.wwangle.com.

In a next post, I will explain how we setup the player to emulate streaming or at least the seek funtionnality.