Streaming FLV videos #3

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

I’ve described in an earlier post how we play videos on our site using the JW Media Player. We created a playlist that begins with our animated logo then shows some of our latest videos. The logo animation will play automatically when the page loads. The user is then presented a menu allowing him to watch the videos.

wwa_playlist

Jw Media Player on WWA

This menu only displays a sample of our videos, which means that some of our movies are not available from our main page. This is something I intend to fix shortly. The real limitation of this system was that we could not provide a direct link to any of these videos to people who might want to easily play a given movie or link to it from their own website. To handle direct links, I wrote a PHP script which generates the playlist.xml file used by the jw media player. If a movie is requested via the url, it will be the first one in the playlist and will automatically play, the other videos of the default playlist are added to the playlist.

If you wish to create a similar feature for your site, here are the main steps of the procedure :

  • Create your PHP script file (for example playlistgenerator.php).
  • In this file, declare an array that will contain the information about each video of the playlist. Here is an example of the array structure  I used:
$videos = array (
0 => array (
“default” => 1,
“name” => “wwa logo”,
“title” => “World Wide Angle animation logo”,
“url” => “world_wide_angle.flv”,
“thumbnail” => “thumbnails/world_wide_angle.jpg”,
“author” => “World Wide Angle”,
“date” => “”,
“description” => “World Wide Angle animation logo”,
“link” => “”
),
1 => array (
“default” => 1,
“name” => “second_video_title”,
“title” => “Title of the second video”,
“url” => “second_video.flv”,
“thumbnail” => “thumbnails/second_video.jpg”,
“author” => “World Wide Angle”,
“date” => “September 20, 2008″,
“description” => “description of the second video”,
“link” => “http://www.alinkaboutthissecondvideo.com”
)
);

I use the default attribute (value is 1 or 0) to define whether the video should be added to the playlist at all times, or only when it has been requested. If you want all your videos to always be in the playlist, set this attribute to 1.

Next, copy (and feel free to adapt) the following code in your script:

function appendVideoToXml($video, &$xml) {
$xml .= ‘<item>’;
$xml .= ‘<title>’.$video["title"].’</title>’;
$xml .= ‘<media:content url=”‘.$video["url"].’” type=”video/flv” start=”00:00″ />’;
$xml .= ‘<media:thumbnail url=”‘.$video["thumbnail"].’” />’;
$xml .= ‘<author>’.$video["author"].’</author>’;
$xml .= ‘<description>’.$video["description"].’</description>’;
$xml .= ‘<link>’.$video["link"].’</link>’;
$xml .= ‘</item>’;
}$xmlheader = ‘<rss version=”2.0″ xmlns:media=”http://search.yahoo.com/mrss/”><channel><title>World Wide Angle video gallery</title><link>http://www.wwangle.com</link>’;
$xmlfooter .= ‘</channel></rss>’;
$selected = $_GET["title"];
$xmlselected = “”;
$xmldefault = “”;
foreach ($videos as $video) {
if ($video["name"] == $selected) {
appendVideoToXml($video, $xmlselected);
} else {
if ($video["default"] == 1)
appendVideoToXml($video, $xmldefault);
}
}
$xmlcontent = $xmlheader . $xmlselected . $xmldefault . $xmlfooter;
file_put_contents(“jwmediaplayer/playlist_custom.xml”, $xmlcontent);

As it is, the script expects the video name to be passed as the “title” parameter.

  • The script being PHP, you need to be sure that your server can run PHP, if so, upload the script to your server
  • In your main page, call the script in order to generate the playlist
include(“jwmediaplayer/playlistgenerator.php”);
  • Finally, modify the page containing the player in order to use the generated playlist instead of the hard coded one
function initMediaPlayer() {
var so = new SWFObject(‘jwmediaplayer/player.swf’,'mpl’,’560′,’420′,’9′);
so.addParam(‘flashvars’,'&file=jwmediaplayer/playlist_custom.xml&playlistsize=280&autostart=true’);
so.write(‘player’);
}

That’s it, it worked for us and allowed us to give artists a direct link to their videos that they could add on their own website: to see the scrcipt in action, you can follow the links below to discover the videos about Michael Johnston an Nassim Al Amin vernissages we filmed last month at chezGrace.

Hope this will help some of you out there.

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.