Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

Does the JW player cache the content of playlists?

18 replies [Last post]

Hi,

I have a dropdown that loads playlists, I have modded the following example:

http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_5-2-3-0.html

All was good until I changed the content of one of the playlist.xml's...

The player is still displaying the old content that I deleted out of the file and replaced with new.

I have closed my browser and tried again but although I have new content in the playlist.xml the player is showing the old content.

Does the player cache playlist content?

I cleared the cache from my browser and then the new content inside the playlist.xml works fine.

Please tell me their is something wrong with the code I have and that the player does not cache (I cannot get ask my users to clear their cache every time I change a playlist.xml with new content.

My code below:

<html>
<head>
<title>JW API Example 5-2-3-0 - JW FLV Media Player</title>

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">

var player = null;
function playerReady(thePlayer) {
player = document.getElementById(thePlayer.id);
}

function createPlayer(thePlayer, theFile) {
var flashvars = {
file:theFile,
                skin:"snel.swf",
autostart:"false",
playlist:"right",
playlistsize:"300",
shuffle:"false",
autoscroll:"false",
volume:"50"
}

var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}

var attributes = {
id:thePlayer, 
name:thePlayer
}

swfobject.embedSWF("player.swf", "placeholder1", "900", "480", "9.0.115", false, flashvars, params, attributes);
}
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
}
.style2 {color: #000000}
.style3 {
font-weight: bold;
vertical-align: middle;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body onLoad="createPlayer('player1', 'playlist_stuff.xml')">
<div id="placeholder1">
  <p class="style2"><a href="http://www.adobe.com/go/getflashplayer">Get flash</a> to see <br>
  </p>
</div>

<table width="370" border="0">
  <tr>
    <td width="329" height="39" valign="middle"><div align="left"><span class="style3">Select a playlist: </span>
      <select name="sel1" onChange="javascript:player.sendEvent('STOP'); player.sendEvent('LOAD', this.value);" style="width:auto;">
        <option value="playlist_mp3.xml" >MP3</option>
        <option value="playlist_mixmedia.xml"> Mixed</option>
        <option value="playlist_birds.xml">Birds</option>
        <option value="playlist_remember.xml">Remember</option>
        <option value="playlist_stuff.xml" selected>Boys</option>
      </select>
    </div></td>
    <td width="31">&nbsp;</td>
  </tr>
</table>
</body>
</html>

the browser will indeed check if it already has a playlist of known name -
but try if this little change will do

<script type="text/javascript">
var rnd="%3F "+Math.floor(Math.random()*10000);
var player = null;
...
...player.sendEvent('STOP'); player.sendEvent('LOAD', this.value+rnd);"...

Tried it but now I cannot load any of the playlist from my select box (I get an 404: Error 2032 ) my playlist are named 01.xml, 02.xml etc. and every time I change the content of the playlist I keep the same filename
the code of the player is

<script src="js/swfobject.js"  type="text/javascript" ></script>
<!-- functions for player-->
<script type="text/javascript">
<!--
var currentItem = -1;
var previousItem = -1;

var rnd="%3F "+Math.floor(Math.random()*10000);
var player = null;
function playerReady(thePlayer) {
player = window.document[thePlayer.id];
addListeners();
}

function addListeners() {
if (player) {
player.addControllerListener("ITEM", "itemListener");
} else {
setTimeout("addListeners()",100);
}
}

function itemListener(obj) {
if (obj.index != currentItem) {
previousItem = currentItem;
currentItem = obj.index;

var tmp = document.getElementById("itm");
if (tmp) {
tmp.innerHTML = "current item: " + currentItem +
"<br>previous item: " + previousItem;
}
getPlaylistData(currentItem);
}
}

function getPlaylistData(theIndex) {
var plst = null;
plst = player.getPlaylist();

if (plst) {
var txt = '';
var info=player.getPlaylist()[currentItem]['title'];
var info2=info.split("|");
txt += '<table width="100%"><tr><td width="60"><a href="?page=7&kwd='+info2[1]+'" title="Κάντε κλίκ για να μεταφερθείτε στο album"><img src="UserFiles/Image/small/' + info2[1]+'.jpg" width="60" height="60" border="0" align="absmiddle" /></a></td><td><table><tr><td><a href="?page=7&kwd='+info2[1]+'" title="Κάντε κλίκ για να μεταφερθείτε στο album"><b><span style="color:#FFFF33">'+info2[2]+'</span></b></a></td></tr><tr><td><a href="?page=7&kwd='+info2[3]+'" title="Κάντε κλίκ για να μεταφερθείτε στον Τραγουδιστή">'+info2[4]+'</a></td></tr></table></td><td align="right" valign="bottom"><b>'+info2[5]+'€</b>  <a href="?page=5&action=add_item&id='+info2[1]+'&qty=1" title="Προσθήκη στο καλάθι"><img border="0" src="images/Icon_GM_shoping_cart2.jpg" align="absmiddle"/></a></td></tr></table>';

var tmp = document.getElementById("plstDat");
if (tmp) { tmp.innerHTML = txt; }
}
}
// -->
</script>

and the select boxes

<select name="sel1" onChange="javascript:player.sendEvent('STOP'); player.sendEvent('LOAD', this.value);"  style="background-color:#5ea5b2;">

With the above solution the script search for something like a.xml12345656 which doesn't exist, would it work with something like a.xml?q=12345656 and remove the cache problem?

Done this which seems to work fine

<select name="sel1" onChange="javascript:sid='?'+Math.random();player.sendEvent('STOP'); player.sendEvent('LOAD', this.value+sid);"  style="background-color:#5ea5b2;"

however forf my default playlist which I load like this

<script type="text/javascript">
sid='?'+Math.random();
                if (screen.width<=1024)
{
var width=323;
                var height=260;
}
else
{
var width=430;
                var height=260;
}
                var so = new SWFObject('player.swf','mpl',width,height,'9');
                so.addParam('allowscriptaccess','always');
                so.addParam('allowfullscreen','true');
                so.addParam('flashvars','file=lists/01.xml&backcolor=333333&frontcolor=EEEEEE&lightcolor=FFFFFF&screencolor=000000&repeat=always&shuffle=true');
                so.write('player');
                </script>
                <table>

I cannot put a "?" inside the so.addParam in the flashvar list because then it wont work (guess "?" is reserved for something else in there ) how can I pass sid as a GET variable in the default playlist?

so.addParam('flashvars','file=lists/01.xml + encodeURIComponent("sid") + '&backcolor=333333&frontcolor=EEEEEE&lightcolor=FFFFFF&screencolor=000000&repeat=always&shuffle=true');

or do here for all
sid=encodeURIComponent("'?'+Math.random()");
so.addParam('flashvars','file=lists/01.xml + sid + '&backcolor=333333&frontcolor=EEEEEE&lightcolor=FFFFFF&screencolor=000000&repeat=always&shuffle=true');

tried

sid=encodeURIComponent("'?'+Math.random()");     so.addParam('flashvars','file=lists/01.xml'+sid+'&backcolor=333333&frontcolor=EEEEEE&lightcolor=FFFFFF&screencolor=000000&repeat=always&shuffle=true');

and got 404:Error #2032 from the player

I am also dealing with the cache issue. I upload new videos to my site each month and need to clear my cache before the new playlist shows.
It would be nice to have the cache cleared automatically - or to have the playlist NOT get cached.

I am using the standard javascript embed process.

<script type="text/javascript" src="swfobject.js"></script>
<div id="player" class="style10">
This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','470','470','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&streamer=rtmp://XXXXXXXXX.rtmphost.com/choreofit&file=playlist2.xml&playlist=bottom');
so.write('player');</script>

There is an easier way.

Use .htaccess files on your webserver to set your playlist files to nocache.

I'm using the google web toolkit to wrap the JW player, so I'm already familiar with caching issues. GWT automatically generates image bundles and script-builds with the text .cache. in the filename, and static entry points with .nocache. in the name.

<Files *.cache.*>
ExpiresDefault "now plus 1 year"
</Files>

<Files *.nocache.*>
ExpiresDefault "now plus 2 minutes"
</Files>

Just change *.nocache.* to *.Your_file_naming_convention.ext.* or whatever. Doing caching {or nocaching} server-side is always MUCH better, since you won't be filling the user's cache with samefilename.xml?q=rand1234... files.

.htaccess files should work on any competent external webservers, even if it DOES NOT work on some localhost IDE webservers... Also, they affect the directory they are placed inside, and all directories below that one.

...Hope this helps!

Cause this is the first time seeing something like that (do not know the google web toolkit or what GWT is) if I have a folder xml and inside 3 palylist 01.xml,02.xml,03.xml. How should I write the .htaccess file? And do I need anything else? I use the javascript embed process to integrade the player (the code generated from the setup wizard)

K...

Your .htaccess file should go in the same folder as the cacheable files, and it would look like:

<Files *.xml>
ExpiresDefault "now plus 1 year"
</Files>

Also, if you expect users to view the same media file more than once, you may want to include a .htaccess in your media folder {or the root folder of your webserver}:

<Files *.flv>
ExpiresDefault "now plus 1 year"
</Files>

<Files *.mp3>
ExpiresDefault "now plus 1 year"
</Files>

This will cache the media files as well, and they will not only load uber fast once they've been completely loaded once, it will also reduce your bandwidth usage by not re-requesting the same large files multiple time.

You can check caching in firefox by typing about:cache into the address bar, and examining what's been saved, and when it will expire.

Please note: caching *.xml should never be done in the root directory of your webserver, since you, or {more liekly} an app you have installed, might likely need dynamic .xml files for standard operation.

Also, .htaccess MUST have user permissions set to 644 {readable by everyone and writeable only by it's owner}. If you have a unix webserver, it should be easy to chmod. Either use their webftp client, or, preferably, if you have shell access, just `chmod 644 /home/user/path/.htaccess`

You shouldn't need anything else.
Htaccess is a very powerful, underappreciated tool.
See http://wiki.dreamhost.com/Htaccess_tricks for some other ways it can be used...

Just note that it will cause a very slight slowdown on all file accesses since it might cause a file-read for every http request; but it's the only way to simulate root security control in a shared host environment.

PEACE!

Im using coldfusion to send videos to a featured xml playlist... but when I add or delete a video from the list the player is still cached.
The htaccess sounds like it works but I have a windows server. Anyone know a way to do the equivalent for windows server 2003 with iis?

Thank you.

The user's browser is caching the playlist.

Just add a random number on to the playlist filename in your player code.

'file': encodeURIComponent('playlist.xml?' + Math.round(1000 * Math.random()))',

'file': encodeURIComponent('playlist.xml?' + Math.round(1000 * Math.random()))',

This worked for me.

lefTy you saved me again, thank you.

yer welcome again...

Mostly to AIyxANDor but also to anyone using knowing htaccess. Suppose you have in the root a folder player with 3 xml inseide which are the playlist how it can be done not to be cashed or to be cashed for a brief period of time ''?
PS I have the embed implementations produced by the wizard where you have

                so.addParam('flashvars','file=/player/01.xml&backcolor=333333&frontcolor=EEEEEE&lightcolor=FFFFFF&screencolor=000000&autostart=true&repeat=always&shuffle=true');

and no matter where I put there the '?' within urlencode or not I doesn't work

I have the same problem with a youtube playlist

I cannot use the following code

sid=encodeURIComponent("'?'+Math.random()");
so.addParam('flashvars','file=lists/01.xml + sid + '&backcolor=333333&frontcolor=EEEEEE&lightcolor=FFFFFF&screencolor=000000&repeat=always&shuffle

because the yotube playlist doesn't have an extension and replacing the ? for & doesn''t work.

file=http://gdata.youtube.com/feeds/api/users/<?=$videocode; ?>/uploads%3Fmax-results=50%26<?=$sort; ?>%26start-index=1

Anybody has an suggestion ?

These YouTube user playlist URIs all work for me:

http://gdata.youtube.com/feeds/api/playlists/B8D6FA74D3F2629C
http://gdata.youtube.com/feeds/api/playlists/B8D6FA74D3F2629C?rnd=123
http://gdata.youtube.com/feeds/api/playlists/B8D6FA74D3F2629C?start-index=1&max-results=50
http://gdata.youtube.com/feeds/api/playlists/B8D6FA74D3F2629C?start-index=1&max-results=50&rnd=123

Demo: http://willswonders.myip.org:8081/Simple_YouTube_Channel.html

Dear Lefty

I was very upset for my player.
Today i found this code, This code helped me,

'file': encodeURIComponent('playlist.xml?' + Math.round(1000 * Math.random()))',

Thanks Lefty