Example: Editing a playlist - Moving / Removing items

Demonstrates how to enable "Edit" which includes "Remove", "Move Up" and "Move Down" capabilities.

Key features


  00:15           
00:00
 
1:17:55
         
 
Mix it up!Edit
  • [1] PÉCS AKTUÁL X - OFFICIAL HD VIDEO (c) Punnany Massif & AM:PM Music180 secsPunnany Massif - Pécs Aktuál X (Sun Kick EP. 2011)
    ----------------------------------------­-
    Rendezte / Directed by: Soltész Péter
    Fényképezte, vágta / D.O.P. & editing: Pamuki Krisztián
    További felvételek / Additional footage: Dittrich Ervin, Komjáthy Máté, Máté Péter
    Producer / Produced by: Soltész Péter / AM:PM Music
    (c) Punnany Massif & AM:PM Music 2011

    A klip a 'Pécs Európa Kulturális Fővárosa 2010' program támogatásával készült.
    ----------------------------------------­---------------------
  • Lost in musicLost in music
  • [2] One day / Reckoning Song (Wankelmut Remix)6 minutes
  • [3] Dub FX 'NO REST FOR THE WICKED' feat. CAde & Mahesh VinayakramCopyright Control
    Filmed by Shaaze Merchant for Urban Beat Project

    'NO REST FOR THE WICKED' One Shot Music Video (Live in India)
    Artist - Dub FX feat. CAde & Mahesh Vinayakram

    Location - Thanks to Laiq for letting us film on his rooftop. =)
  • [4] YouTube - Awesome people
  • [5] 3D Sphere10 secsAfter Effects project end result clip
  • [6] Colorful Origami15 secsAfter Effects project end result clip.
  • [7] Light Paths13.88 secsAfter Effects project end result clip.

CSS

  #player_wrapper{
    width:85%;
    margin-right:auto;
    margin-left:auto;
  }
  #example{
    float:left;
  }
  /* Default breakpoint styles */
  #example,#example.jwfullscreen{
    width:100% !important;
  }
  /* Listy container */
  #example_listy{
    width:100%;
    float:left;
  }
  /* Description - Limit displayed text */
  #example_listy .listy-description{
    height:42px;
    overflow:hidden;
  }
  /* Playlist images - Hide images*/
  #example_listy .listy-fill{
    display:none;
  }
  #example_listy .listy-textwrapper {
    padding:10px;
  }
  /* Medium breakpoint */
  @media only screen and (min-width: 35em) {
    #player_wrapper{
      width:65%;
    }
    #example_listy .listy-search-wrapper{
      width:50%;
    }
    /* IMAGES */
    #example_listy .listy-fill{
      display:block;
    }
    #example_listy .listy-textwrapper {
      padding:10px 10px 10px 150px;
    }
  }
  /* Large breakpoint */
  @media only screen and (min-width: 65em) {
    #player_wrapper{
      width:75%;
    }
    #example{
      width:47% !important;
    }
    #example_listy{
      width:47%;
      float:right;
    }
    /* Playlist area */
    #example_listy_list{
      height:500px;
    }
    /* Description */
    #example_listy .listy-description{
      height:auto;
      overflow:none;
    }
  }

HTML

  <div id="player_wrapper">
    <div id="example"></div>
  </div>

Setup code

  jwplayer("example").setup({
    "playlist":[{...}],
    "width":"100%",
    "aspectratio":"16:9",
    "plugins": {
      "listy.js":{
        "features":{
          "shuffle":{"enabled":true,"label":"Mix it up!"},
          "search":{"enabled":true},
          "edit":{
            "enabled":true,
            "label":"Edit",
            "buttons":{
              "move_up":{"enabled":true},
              "remove":{"enabled":true,"label":"REMOVE"},
              "move_down":{"enabled":true}
            }
          }
        }
      }
    }
  });
One thing to note is that you should not include the JW "listbar" setting if using the Listy plugin