Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

onPlayListItem returns previous rather than current item being displayed


My attempt at using onPlayListItem to get info about current item in playlist always returns the previous item! Anyone know what I am doing wrong? My code looks like this:

bc.. function addMedia(mediaUrl,mediaTitle)
{
var playlist = jwplayer().getPlaylist();
var newItem = {
file: mediaUrl,
//image: "../plupload/uploads/4d7946b702a1a.jpg",
title: mediaTitle
};
playlist.push(newItem);
jwplayer().load(playlist);
}

jwplayer("mediaplayer").setup(
{
autostart: true,
flashplayer: "../jwplayer/player.swf",
//file: "../plupload/uploads/4d7946b702a1a.jpg",
//image: "../plupload/uploads/4d7946b702a1a.jpg",
title: "Big Buck Bunny trailer",
height: 490,
width: 800,
'playlist.position': "right",
'playlist.size': 200,
events: {
onPlaylistItem: function(event) {
var currentItem = jwplayer().getPlaylistItem();
$('div.currentplay').html(currentItem.title);
}
}



I use the addMedia function to create the playlist.

6 Community Answers

JW Player

User  
0 rated :

Am I the only one to have experienced this?

Could it be something to do with the way the playlist is created?

JW Player

User  
0 rated :


I don't know what you're doing wrong, but with a v5.5.1641 player (and all previous releases) I always get the correct information for the currently playing track.

Test Page:
bc.. http://willswonders.myip.org:8088/HTML5/JW%20Player%20HTML5-Beta3-01.html




If you post a link to your Test Page, perhaps someone can figure out what is wrong; code snippets are *_NOT_* useful.

JW Player

User  
0 rated :

You can see the problem I am having at the following web page:

http://www.vavavid.com/jwplayer/test.php

Click on the links to add the three photos to the playlist. The alert shows the result of calling this.getPlaylistItem when event onPlaylistItem happens.

When the three photos have been added, click on one of them in the playlist and you will see that the alert shows that the previous item is returned by this.getPlaylistItem and not the item you have just selected.

Any idea why I am getting this strange behaviour? My guess is it is too do with my addMedia function, but I can't spot what I am doing wrong.

JW Player

User  
0 rated :

I dunno; looks OK to me...

bc.. <!DOCTYPE HTML>

<html lang="en">

<head>

<title>Bill Noble - JW Player HTML5</title>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('swfobject', '2.2');
google.load('jquery', '1.5.1');
</script>

<script src="http://www.vavavid.com/jwplayer/jwplayer.js"></script>

<script src="http://www.vavavid.com/js/jquery.playlist.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.vavavid.com/css/playlist.css" />

</head>

<body>

<div id="mediaplayer" class="mediaplayer">Player</div>
<div style="clear:left;"></div>
<ul>
<li>
<a href="#" onclick="addMedia('http://www.vavavid.com/plupload/uploads/4d7a87915e0ec.jpg', 'Three Lamps')">Three Lamps</a>
</li>
<li>
<a href="#" onclick="addMedia('http://www.vavavid.com/plupload/uploads/4d7a8799af93e.jpg', 'Map')">Map</a>
</li>
<li>
<a href="#" onclick="addMedia('http://www.vavavid.com/plupload/uploads/4d7946b702a1a.jpg', 'LED spot')">LED spot</a>
</li>
</ul>
<div id="playlist">Playlist:</div>

<script type="text/javascript">
var player = null;
var playlist = null;
var playerObj = null;


function addMedia(mediaUrl,mediaTitle)
{
playlist = jwplayer().getPlaylist();

var newItem =
{
'file': mediaUrl,
'title': mediaTitle
};

playlist.push(newItem);
jwplayer().load(playlist);

dumpPlaylist();
};


function emptyPlaylist()
{
playlist = jwplayer().getPlaylist();

while(playlist.length>0)
{
playlist.pop();
}

var newItem =
{
'file': 'http://www.vavavid.com/images/jwvavavidlogo.gif',
//'image': 'http://www.vavavid.com/plupload/uploads/4d7946b702a1a.jpg',
'title': 'VaVaVid'
};

playlist.push(newItem);
jwplayer().load(playlist);

dumpPlaylist();
};


function dumpPlaylist()
{
playlist = jwplayer().getPlaylist();
var listnodes = '<br />';

for(var j in playlist)
{
listnodes += 'Track: ' + j + '<br />';

for(var k in playlist[j])
{
listnodes += '<li>' + k + ': ' + playlist[j][k] + '</li>';
}
}

listnodes += '<br />';

gid('playlist').innerHTML = 'Playlist:' + listnodes;
};


jwplayer('mediaplayer').setup
(
{
'flashplayer': 'http://www.vavavid.com/jwplayer/player.swf',
'width': '800',
'height': '490',
'title': 'Big Buck Bunny trailer',
'playlist.position': 'right',
'playlist.size': '200',
'events':
{
'onPlaylistItem': function(event) {alert('Current playlist item being shown is: ' + event.index + ': ' + jwplayer().getPlaylistItem(event.index).title);}
},
'autostart': 'true'
}
);


function gid(name)
{
return document.getElementById(name);
};
</script>

</body>

</html>



JW Player

User  
0 rated :

Thanks for that. Now that I have something working I will do a binary chop with my scalpel to find out why my version is going wrong.

JW Player

User  
0 rated :

OK! Got it!

Your event handler works mine doesn't!

Many thanks for solving this problem for me. I can now stop banging my head against a wall :)

This question has received the maximum number of answers.