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!

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.

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.