On this link: http://support.jwplayer.com/customer/portal/articles/1543546-example-making-your-own-playlist-sidebar
how do you add a class to the currently playing thumbnail - so that I can make an active class? I looked at the api but the get stuff hasn't been working for me…not sure why. Using, jquery, so something like if currentIndex - then addClass active, else removeClass active…. Is there a sample somewhere?
My suggestion would be to iterate through your custom playlist items in an onPlaylistItem() event and change the className of the currently playing video. Here’s a code example:
jwplayer().onPlaylistItem(function(){
var thisVideo = ’video’+jwplayer().getPlaylistIndex();
var listbarItems = document.getElementsByClassName(‘listbar_item’);
for (i=0; i<listbarItems.length; i++) {
if (listbarItems[i].id == thisVideo) {
listbarItems[i].className = ‘listbar_item_playing’;
} else {
listbarItems[i].className == ‘listbar_item’;
}
}
});
Sorry, I made an error in by setting listbarItems = document.getElementsByClassName(‘listbar_item’). Here’s a working solution:
<div id='demo'></div><br>
<div id='listbar'></div>
<script type='text/javascript'>
jwplayer(‘demo’).setup({
playlist: [{
file: “bunny.mp4”,
image: “bunny.jpg”,
title: “Big Buck Bunny trailer”,
description: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis velit non leo porta laoreet. Donec blandit tincidunt placerat. Curabitur commodo erat sit amet sem elementum aliquam.”
},{
file: “sintel.mp4”,
image: “sintel.jpg”,
title: “Sintel trailer”,
description: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis velit non leo porta laoreet. Donec blandit tincidunt placerat. Curabitur commodo erat sit amet sem elementum aliquam.”
},{
file: “tears.mp4”,
image: “tears.jpg”,
title: “Tears of Steel trailer”,
description: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis velit non leo porta laoreet. Donec blandit tincidunt placerat. Curabitur commodo erat sit amet sem elementum aliquam.”
}],
width: ‘480’,
height: ‘270’,
skin: ‘skins/glow/glow-edited.xml’,
});
jwplayer().onReady(function(){
var myVideos = jwplayer().getPlaylist();
for (var i = 0; i < myVideos.length; i++) {
//put the code to get your rating here
document.getElementById(‘listbar’).innerHTML = ‘<div class=listbar_item id=video’ i +’ onClick=“jwplayer().playlistItem(’ + i + ’);”><img style="float: left; height: 60px; margin-right: 5px;" src=' + myVideos[i].image + '><b>’ + myVideos[i].title + ‘</b><br>’ + myVideos[i].description + ‘</div>’;
}
});
jwplayer().onPlaylistItem(function(){
var thisVideo = ’video’+jwplayer().getPlaylistIndex();
var listbarItems = document.getElementById(‘listbar’).children;
for (i=0; i<listbarItems.length; i++) {
console.log(listbarItems[i].id);
console.log(thisVideo);
if (listbarItems[i].id == thisVideo) {
listbarItems[i].className = ‘listbar_item_playing’;
console.log(‘Just set ’+listbarItems[i].id+’ to listbar_item_playing’);
} else {
listbarItems[i].className = ‘listbar_item’;
console.log(‘Just set ’+listbarItems[i].id+’ back to listbar_item’);
}
}
});
</script>
