playlist javascript/css and scrolling

14 posts | return to the JavaScript Interaction forum | get the rss feed for this thread

Oct. 23, 2009Edward Spiegel

I have my playlist in a div that has a scrollbar if there is vertical overflow (using 'auto'). My player uses shuffle mode (so that our visitors don't hear the same tunes in the same order every time they visit). What I am wondering is, is there some way to make sure that when an item plays that the playlist is scrolled so that the currently playing item is visible?

Thanks,

Edward

p.s. Hoping that someone else is wondering this too

Oct. 24, 2009Edward Spiegel

Hobbs? Or anyone else, any ideas?

Oct. 24, 2009hobbs

I've never seen this implemented in any of the vertical HTML playlists, though I've done it in horizontal HTML playlists.

Basically, when the current item changes, in the ITEM Listener function, calculate the scroll amount (index * track height), then scroll the playlist element.
gid('playlistdiv').scrollTop = calculatedAmount;


So if the index was:
0 then calculatedAmount = 0 * 50 scroll 0
5 then calculatedAmount = 5 * 50 scroll 250

The index returned by the ITEM Listener will be the position in the player's playlist. If you've scrambled the playlist, you will have to lookup the corresponding index in your playlist object (unless you loaded your scrambled playlist object into the player, then they should match).

Oct. 24, 2009Edward Spiegel

Thanks. I have only just now been getting hep to jquery. Wow. I can't believe how easy it makes things.

Here is the code that I have come up with and it is working well. This assumes that the playlist is in a div in the main window (i.e. if the playlist were itself in a scrolling div this wouldn't work).

Hopefully someone else will find this useful. This code assumes that one is using the javascript/playlist libraries that LTV has posted

var item = document.getElementById(obj['id']).getConfig().item;
var playlist = $("#"+obj['id']).next();
var itemTop = playlist[0].childNodes[item].offsetTop;
var itemHeight = $(playlist[0].childNodes[item]).height();
var itemOffset = $(playlist[0]).height() - itemTop;
var curScroll = $(playlist[0]).scrollTop();
if (( itemOffset < itemHeight) || (curScroll > itemTop)) {
$(playlist[0]).scrollTop(itemTop);
}

Oct. 24, 2009hobbs

Nice!

I'm going to use that in my HTML playlist Test Pages.

Although I've always preferred to use headless players when I wanted to have multiple, separated playlists. Then you can use the JS API to talk back and forth between the player-players and the playlist-players.

DC made a nice one here: http://www.longtailvideo.com/support/forum/General-Chat/18426/multiple-visible-playlists

DC's final page: http://www.isolatedground.com/Credits/multLists3.html

Oct. 25, 2009Edward Spiegel

In the headless players, how are the 'heads' of the 3 players that are only used for playlist display hidden? Is it because they are positioned so that the display area is out of the visible bounds of the divs that contain them?

I notice that on my computer, the top item of each playlist is cut off.

Oct. 25, 2009hobbs

For the headless playlist-players, controlbar=none and the playlistsize=player height.

I see DC has height=460 and playlistsize=480, which may explain why the playlist is cut off. They should both be the same.

Oct. 27, 2009Edward Spiegel

I see. Setting the playlist height to the player size. Very clever. Didn't realize that would work.

Good to know.

Oct. 27, 2009hobbs

 
Jeroen is the master of clever tricks.

From: http://www.longtailvideo.com/players/jw-flv-player/LongTail receives a lot of requests for creating customized versions of our player. In most cases, a clever flashvars setting can provide the solution you're looking for, so please check this list of flashvars or the setup wizard.

Nov. 07, 2009Gino

hi, where do i put this code to work?
do i give a ID named "item" to the jw_playlist_item ?

Nov. 16, 2009Zachary Ozer

Hi Gino,

I'm not sure what you're asking. Could you please rephrase your question?

Nov. 17, 2009Gino

I wanted to know how to make the item go to top automatically with the javascript playlist (like the flash playlist) when a song is playing
working with the jquery.playlist
thank's

Nov. 17, 2009Zachary Ozer

The javascript playlist doesn't currently support this, though you should feel free to add this functionality.

Nov. 18, 2009medhataz

please

Add a reaction

You can also return to the category or try this search for related threads.

Your name *

Supported codes:

 

submit