autostart and javascript/css playlist highlighting

Didn't know about it - we'll investigate.

Zachary,

I thought I'd mention that it doesn't matter if shuffle is on or not. If one is using the javascript/css to display the playlist and autostart is on the first item played is not highlighted. I tried with 4.5.230

I couldn't try with 4.6 because for some reasons I am having problems with that version.

Got the 4.6 problem straightened out (permissions issue) and 4.6 behaves the sme. So, I guess it is the library rather than the player.

It would be great if this got straightened out.

Zachary,

I did a bit of poking around because I needed to get this working. Here is some info that may help you figure out the solution and also some workaround code for anyone that needs a fix for this. There may be more elegant solutions than mine.

Ok. The problem is that the itemHandler does not get triggered for the first item played back (at least when shuffle is turned on). (Maybe there is a race condition so that the itemListener has not yet been instantiated when when the player sends it).

After a lot of experiments, I found that the only way that I could reliably set the highlight to the correct item was by setting up a listener for STATE changes and setting the highlight the very first time that that the player issues the PLAYING state.

I tried setting it when the playlist first fires but that doesn't work for the obvious reason that the playlist has not yet been instantiated at that point in the html. (Side note: also, for me listening for the playlist also failed because the first time the player loads it seems like the playlist 'event' was sometimes coming in before the listener itself had been fully initialized.

So, my solution goes something like this:

function stateListener(obj){
switch(obj.newstate) {
case "BUFFERING" :
//my code to display my "now loading' animation/message
break;
case "PLAYING" :
var itemToPlay = document.getElementById('mpl').getConfig().item;
if (!mplInited){
setHighlight(obj);//needed because the javascript library is not setting the highlight when autostart is used
mplInited=true;
}
//various other things that I do when a track starts playing back
break;
}
}

function setHighlight(obj){
//cribbed from the longtailvideo javascript
//and yes i know there is more efficient way to do this but I was too lazy to optimize tonight
var item = document.getElementById(obj['id']).getConfig().item;
var playlist = $("#"+obj['id']).next();
var currentItem = 0;
playlist.children().each(function(){
if (currentItem == item) {
$(this).addClass("playing");
}
currentItem++;
});

}

var mplInited=false;

try { var myReady = playerReady;} catch (err){}

playerReady = function(obj) {
player = document.getElementById(obj['id']);
player.addModelListener("STATE",'stateListener');
try {
myReady(obj);

} catch (err){
}
}

I am pretty ignorant as far as DOM programming is concerned. Can some one tell me what the most direst way to "addClass("playing") to item X of the playlist. In this case, we don't need to iterate through all of the playlist children. But I couldn't find the write syntax to do something like

playlist[0].childNodes[item].addClass("playing") which is all that we need to do when the very first item plays (keep in mind that the item number can be random since I am using shuffle mode)

I figured out (by imitation) syntax that works so that set highlight doesn't have to iterate

function setHighlight(obj){
var item = document.getElementById(obj['id']).getConfig().item;
var playlist = $("#"+obj['id']).next();
var currentItem = 0;
$(playlist[0].childNodes[item]).addClass("playing");
}

Can someone tell me why the $() syntax is required. I am not quite sure what it means

$ syntax is jquery.

I'll integrate this into the default release next week.

Various Listeners don't get called upon instantiation because the player is sitting idle or already playing, however you have it setup, when the Listeners are added.

The sequence is:
1) instantiate the player,
2) player loads the playlist,
3) add Listeners.

So, if you need a response from a Listener immediately (actually, a response from the Listener's function), you should call the Listener's function. I usually do it immediately after adding the Listeners, like this:

        if(playlist.length > 0)
        {
          player.addControllerListener('ITEM', 'itemMonitor');
          <strong>itemMonitor({index:0});</strong>
        }
        else
        {
          setTimeout("addListeners();", 50);
        }
      };

Tried to implement the ideas/changes in here but highlighting the first item in a js playlist on autostart doesn't work for me. Works on click fine. Any ideas on this ?

I'm using this http://www.longtailvideo.com/support/jw-player/23/create-a-javascript-playlist wtih version 5.1 of the player. Thanks.

@Darron - Can you provide a link to where you are running this?

Ethan, sorry for the delay. Unfortunately I'm unable to provide a link because of client request and content. Would it be helpful to paste in my html and .js versions ?

Apologies as I know this isn't very helpful. Not much I can do.

If you could post a link with possibly a different video clip, but still demonstrating the same error, it would help greatly.