Expose4: create an album of Flash Videos

December 9, 2008 by Samantha Halfon · Leave a Comment
Filed under: Internet 

Grace Teshima hosts arts exhibitions in Montmartre, Paris. Each exhibition starts with an informal “vernissage”. Those who couldn’t attend can view a short video of the event. Over the past four years, we worked on several of these videos for Grace. What started out as a souvenir of the show for the artists and guests, turned into an interesting collection of videos covering various artforms and subjects. A few weeks ago, I decided I wanted to gather these videos on a single page. Thus, making it easy for a viewer to browse through these short movies and get a sense of what goes on at Grace’s.

I have already explained in an earlier post why I think flash video is the format to use to stream videos online. With that decision made up, one still needs a player. I was looking for a player with the following features:

  1. A playlist that I could easily and rapidly update
  2. The possibility to play various sizes of videos (since our earlier videos had a lower resolutions than the most recent ones due to the bandwidth restrictions of the time)
  3. The possibility to add and display a description about each video
  4. The possibility to customize the interface to match the design of the page
  5. A simple yet good looking design

After researching the issue, I decided to use Expose4, developed by Ivan Dramaliev. His player offers several features:

  1. The possibility to display photos and/or videos
  2. The possibility to customize the colors and icons of the interface
  3. An application to manage the playlist (for mac os x and windows)
  4. An alternative web based application (PHP) to manage the playlist
  5. The possibility to manage albums which we used to group the videos by years
  6. The possibility to setup the application by sending parameters to Flash (e.g. an autostart option)

I use open source software when I can but unfortunately Expose4 is not. It is free for personal use though. A one-site license costs $50.

Below are some screenshots of the player on the page we designed for chez Grace videos.

The album selector

The album selector

The video selector

The video selector

The player and its controls

The player and its controls

The toolbar

The toolbar

I’m currently working on creating direct links to autoplay each video, so that the artists can link to them from their own website. I am not yet able to get this particular feature working though it does work for photos. I’m in touch with the developer and I hope to get that sorted very soon. When I have the solution, I will share it here. I believe Expose4 is a good looking option for showing multimedia content online, and I’m sure this feature will interests other expose4 users.

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

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.