How to create a Related Playlist for JW Player

Play lists and Related play lists are created with a simple XML file.It has a title, a thumbnail and the path to the media. Here we explain how to make this work with the JW Player by Longtail, used in our S3Media Pro extension for Joomla!

It looks more complicated then it is. Have a quick look and I will explain how this works below. You may want to copy this part and save it in a plain text file. Do not use any formatting on XML files or they won't work. Do not use sophisticated editors either. A Notepad (PC) or SimpleText(Mac) will do just fine.

<?xml version="1.0" encoding="utf-8"?>
<videolist>
<video id="001">
<title>Beyond 9/11</title>
<thumb>http://www.joomla21century.com/images/stories/demo-playlist1S.jpg</thumb>
<url>http://www.youtube.com/watch?v=J1hvgfoJVww</url>        
</video>
<video id="002">
<title>Prisoner of rules</title>
<thumb>http://www.joomla21century.com/images/stories/demo-playlist2S.jpg</thumb>
<url>http://www.youtube.com/watch?v=ahwdYRErSKc</url>        
</video>
<video id="003">
<title>Memory</title>
<thumb>http://www.joomla21century.com/images/stories/demo-playlist3S.jpg</thumb>
<url>http://www.youtube.com/watch?v=MwM1q4Oz-zo</url>        
</video>
</videolist>

Example screenshot according to the above play list :

playlist-overview

What are the main elements?

<?xml version="1.0" encoding="utf-8"?>
<videolist>
</videolist>

The first line remains always the same and the tags <videolist></videolist> form the opening- and closing elements for our videos. <videolist> has child elements, namely <video></video> and this has one attribute, the id. The id needs to be unique for every video in the list. So, you start with:

<?xml version="1.0" encoding="utf-8"?>
<videolist>
<video id="001">
</video>
<video id="002"></video>
<video id="003">
</video>
etc...

</videolist>

Then we introduce the 3 child nodes of the element <video>, which as we have seen are: <title>, <thumb> and <url>.  We place those between every instance of <video></video>, like this:

<?xml version="1.0" encoding="utf-8"?>
<videolist>
<video id="001">
<title><title>
<thumb></thumb>
<url><url>

</video>
<video id="002">
<title><title>
<thumb></thumb>
<url><url>

</video>
<video id="003">
<title><title>
<thumb></thumb>
<url><url>

</video>
etc...
</videolist>

What do we have to keep in mind when filling in the details?

Title <title> has to be short, as you can see from the sample above, you do not have that much space. It can contain alpha- and numeric characters but avoid using special characters.
<title>Beyond 9/11</title>

Thumbnail <thumb> needs to be the full path http://...) to the thumbnail images, which is ideally a PNG, GIF or JPG and maximum 107x76 pixels big. If you work with a lot of play lists, organization is key to success.  Put every play list in its own folder and you have all elements of the same list together. In Joomla, the S3Media Pro extension expects you to play the thumbnails within images/stories/. Subfolders are allowed and encouraged.
<thumb>http://www.joomla21century.com/images/stories/demo-playlist1S.jpg</thumb>

URL <url> also needs to be the full path, whether it is on your own server or somewhere else. Ideally, you keep the viewers on your own site, by embedding the video in your articles.  Then simply link to those articles in the <url>. In that sense, the example at the beginning of this article is not such a good one because All three links leads to YouTube directly.  It is much better to embed these videos from YouTube by suing a module like S3Media Pro.
<url>www.joomla21century.com/articles/demo-playlist1</url>

And this is an example with videos embedded using the S3 Media Pro module for Joomla 1.5:

You need the Flash Player installed to play this video.

 



Add this page to your favorite Social Bookmarking websites

There is a WordPress version too!

Due to numerous requests, we decided to create a Wordpress version of S3Media Stream as well.  Check it out at www.wp21century.com
Since WordPress is fundamentally different from Joomla, this 'plugin' has its own approach, but there is no coding involved, just like the Joomla!- version.

Official PayPal Seal