Read the Post

May 13, 2012

Frustration Solved: How to Loop a Playlist in JPlayer

OK. This is total geekiness, but that’s just who I am. I’ve spent the last few hours (at least!) looking for any documentation that explains how to have a playlist you create in JPlayer loop by default. I knew it had to be possible since there’s a nifty “repeat” command built right into the player. But I’ll be damned if anybody over at JPlayer HQ actually included it in the documentation for their Playlist Add-on!

I searched their website. I searched their Google support group. I searched numerous other geeky outlets and found nothing. Am I really the only person who wants this? Or am I the only person too dense to guess how it works on his own? (OK, don’t answer that…)

Guessing is exactly what I did – over and over again – and after a lot of frustration I finally guessed correctly. So, in hopes that it would help anyone else figure this out, I thought I would post my answer right here! That’s what this Web Design category is supposed to be all about after all.

Let’s get down to business. It turned out to be as simple as including a Boolean true|false in the setup of the Playlist. But what setting and where? It seems obvious enough now that I see it, but here it is spelled out for anyone else who might be struggling. Here’s the nitty gritty on how set up a playlist using JPlayer‘s amazing Playlist Add-on – one that will loop forward and backward:

    var myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jp_player",
        cssSelectorAncestor: "#jp_container"
    }, [
        {
            title:"Your Title 1",
            mp3:"/path/to/music.mp3"
        },    
        {
            title:"Your Title 2",
            mp3:"/path/to/more-music.mp3"
        }
    ], {
        playlistOptions: {
            loopOnPrevious: true
        },
        loop: true,
        swfPath: "/path/to/directory/with/Jplayer",
        supplied: "mp3"
    });

 

It’s as simple as including that loop: true setting along with the loopOnPrevious: true setting inside the playlistOptions section. That gets your playlist looping forward and back – so that the playlist will repeat on playback and loop forward and back by clicking the previous or next buttons.

Whew! One headache solved for myself. Hope it helps! Let me know if it does…

Geeky Tips
10 Comments
  1. Ok. But my playlist isn’t in the js code, but in the HTML code in a HTML list. In the way you have shown it don’t works. Have you replaced the HTML list by the js array?
    Thnk u.

  2. Matthew FriesNo Gravatar July 1, 2012 at 4:59 AM

    Taboada –
    I was going straight from the demo on this page:

    http://jplayer.org/latest/demo-02-jPlayerPlaylist

    I let jPlayer create the HTML. The demo on that page shows you how to put your playlist in a JS array and the jPlayer playlist plugin creates the HTML list for you – writes it into the page. Once a basic playlist is initiated you can easily insert or remove tracks (instructions on that page also).

    Hope you figure it out.

  3. Thanks.

    m looking for this and works fine 4 me.

  4. Thanks.

    Its working fine.

  5. Nice, thanks for working this out and saving me the same trouble :)

  6. omg thank you so much.

  7. actually, i just noticed that this doesnt quite work right.. instead of looping the whole playlist on end of last song, it just loops that last song over and over.

    anyone else having this issue?

    • Matthew FriesNo Gravatar June 3, 2013 at 3:38 PM

      Strange. It’s working for me on this site: curtisstigers.com if you want to take a look at the source code (it’s in the footer). Maybe related to the version of the jplayer plugin? I set this up over a year ago so I don’t know if something has changed…

  8. Well, it seems i was messing things up by attempting some customization using the jQuery UI library to allow for a little more interactivity in the volume and playhead controls.. I was at first naively just redundantly instantiating the jPlayer object in order to enable some jPlayer options/values that worked with the UI controls all from someone else’s example. That instance of the jPlayer object in addition to the playlist object was somehow ruining the loop.

    That said, I spent some hours today properly implementing the needed options into the playlist object and adjusted the values for the UI accordingly. It all works great now- check it out here:

    jPlayer w/ Playlist add-on with jQuery UI

  9. Thanks a lot!!!

Comments are closed.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Text Widget
Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sit amet lacinia turpis. Nunc euismod lacus sit amet purus euismod placerat? Integer gravida imperdiet tincidunt. Vivamus convallis dolor ultricies tellus consequat, in tempor tortor facilisis! Etiam et enim magna.
Cart