Example: Adding features - Shuffle, Search
Demonstrates how to enable "Shuffle" and "Search" capabilities.
Key features
- Customisable button label - rename "Shuffle" to whatever you like.
- Shuffle only randomises items within the playlist which appear after the current playing item
- Search allows you to quickly pinpoint tracks within the playlist
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!","onLoad":false},
"search":{"enabled":true}
}
}
}
});
One thing to note is that you should not include the JW
"listbar" setting if using the Listy plugin