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 Stream 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. 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 using a module like S3Media Stream.
<url>www.joomla21century.com/articles/demo-playlist1</url>