Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

JWPlayer playlist button not on at start.


How do I put the playlist button to be on and in the corner without playing the video just like it used to be in 7!

21 Community Answers

Todd

JW Player Support Agent  
0 rated :

I do not see any built-in functionality for adding a button before the viewer clicks play, but I will check with our level two engineers to see if they know a way to do this.

Todd

JW Player Support Agent  
0 rated :

The placement of a button added with .addButton() cannot be moved outside of the controlbar.

The only option we can think of for having the playlist icon appear before playback is to show the controlbar with CSS:

.jw-state-idle .jw-controlbar {
  display: flex !important;
}

You may also be interested in seeing the “Playlist Shelf” demo at https://developer.jwplayer.com/jw-player/demos/customization/default-custom-playlist/

j...

User  
0 rated :

is there anyway to add this to the cloud hosted version?

Todd

JW Player Support Agent  
0 rated :

I would expect that the custom CSS would applied to the player classes whether the player is self-hosted or cloud-hosted.

j...

User  
0 rated :

Ya I really like the playshelf, just not sure that will work with the cloud version. I dont know how to add that to this,

<script src="https://content.jwplatform.com/players/0SST7VQM-tqDaKFl2.js"></script>

I am used to doing selfhosted so I am lost just starting out with the cloud hosted version.

John

j...

User  
0 rated :

or, https://cdn.jwplayer.com/v2/playlists/NUOud5GJ

j...

User  
0 rated :

this is not working?
----------------------------------
<script type="text/javascript">

// Start Playlist Overlay Example
function initInPlayer(playlistId) {
jwplayer('in-player-demo').setup({
displaytitle: true,
logo: false,
playlist: 'https://cdn.jwplayer.com/v2/playlists/' + playlistId
// By default, the parameter visualplaylist is true.
});
};

initInPlayer('NUOud5GJ');
// End Playlist Overlay Example

// Start Playlist Shelf Example
function initOutPlayer(playlistId) {
var playerInstance = jwplayer('out-player-demo')
.setup({
displaytitle: false,
logo: false,
autostart: false,
playlist: 'https://cdn.jwplayer.com/v2/playlists/' + playlistId,
width: '100%',
aspectratio: '16:9',
visualplaylist: false
});

initPlaylist(playerInstance);
}

function initPlaylist(player) {
$.ajax(player.getPlaylist()).then(function(data) {
var playlistWrapper = $('.playlist-wrapper');
var playlistTemplate = Handlebars.compile($('#out-player-playlist-template').html());
playlistWrapper.html(playlistTemplate(data));

playlistWrapper.on('click', '.playlist-item-link', setVideo.bind(this, data.playlist, player));
player.on('playlistItem', setActive);
});
}

function setVideo(playlist, player, e) {
var currentVideo = $(e.target).closest('a').data('mediaid');
var videoIndex = playlist.findIndex(function(video) {
return currentVideo === video.mediaid;
});

e.preventDefault();

player.playlistItem(videoIndex);
}

function setActive(e) {
var id = e.item.mediaid;

$('.playlist-item-link').removeClass('active')
.filter(function(item) {
return $(this).data('mediaid') === id;
})
.addClass('active');
}

initOutPlayer('NUOud5GJ');
// End Playlist Shelf Example

</script>

j...

User  
0 rated :

can some tell me why the code above does not work.

j...

User  
0 rated :

I guess version 8 is still too new yet to get things to work. when you get this figured out can you please let me know.

thanks,
John

Todd

JW Player Support Agent  
0 rated :

Isn’t that the code example from https://developer.jwplayer.com/jw-player/demos/customization/default-custom-playlist/ ?

They are using a cloud-hosted player on that demo page. My suggestion is to copy the source code from GitHub and verify that it is working for you before making any changes.

a...

User  
0 rated :

yes thats the code. I am using cloud-hosted also.

I don't know how to work with the source code at all. I thought the reason they put up that demo was that was how to do it? if I have to spend hours/days coding what is the purpose of using jwplayer? also cant find any code on how to use the JSON source, cant get any of this to work.

thanks,
John

j...

User  
0 rated :

yes example from here: https://developer.jwplayer.com/jw-player/demos/customization/default-custom-playlist/

here is my code, and nothing works, can someone PLEASE tell me what I am doing wrong. I have working on the for days now and cant get this to work.

<script type="text/javascript">

// Start Playlist Overlay Example
function initInPlayer(playlistId) {
jwplayer('in-player-demo').setup({
displaytitle: true,
logo: false,
playlist: 'https://cdn.jwplayer.com/v2/playlists/' + playlistId
// By default, the parameter visualplaylist is true.
});
};

initInPlayer('NUOud5GJ');
// End Playlist Overlay Example

// Start Playlist Shelf Example
function initOutPlayer(playlistId) {
var playerInstance = jwplayer('out-player-demo')
.setup({
displaytitle: false,
logo: false,
autostart: false,
playlist: 'https://cdn.jwplayer.com/v2/playlists/' + playlistId,
width: '100%',
aspectratio: '16:9',
visualplaylist: false
});

initPlaylist(playerInstance);
}

function initPlaylist(player) {
$.ajax(player.getPlaylist()).then(function(data) {
var playlistWrapper = $('.playlist-wrapper');
var playlistTemplate = Handlebars.compile($('#out-player-playlist-template').html());
playlistWrapper.html(playlistTemplate(data));

playlistWrapper.on('click', '.playlist-item-link', setVideo.bind(this, data.playlist, player));
player.on('playlistItem', setActive);
});
}

function setVideo(playlist, player, e) {
var currentVideo = $(e.target).closest('a').data('mediaid');
var videoIndex = playlist.findIndex(function(video) {
return currentVideo === video.mediaid;
});

e.preventDefault();

player.playlistItem(videoIndex);
}

function setActive(e) {
var id = e.item.mediaid;

$('.playlist-item-link').removeClass('active')
.filter(function(item) {
return $(this).data('mediaid') === id;
})
.addClass('active');
}

initOutPlayer('NUOud5GJ');
// End Playlist Shelf Example

</script>

j...

User  
0 rated :

this one does not work for me either.

https://developer.jwplayer.com/jw-player/demos/developer-showcase/multiple-playlists/

Todd

JW Player Support Agent  
0 rated :

But the demos are working for you in your browser, right?

j...

User  
0 rated :

yes, when I click on the demo they work. but I want them to work on my page with my jwplayer cloud links.

Todd

JW Player Support Agent  
0 rated :

You are correct, the GitHub code example does not link to the jQuery library.

You need to add:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

to the top of the index.html doc

Hope this helps,
Todd

a...

User  
0 rated :

ok, added that line,

this is all I get. my video is not there:
http://www.artisticimages.com/test/

a...

User  
0 rated :

Again, I just want to do the playlist shelf like in this example:

https://developer.jwplayer.com/jw-player/demos/customization/default-custom-playlist/

John

a...

User  
0 rated :

Maybe in the future under "Players" Setup/Custom, you can just add a check box for playlist shelf, that would be sooo wonderful.

John

Todd

JW Player Support Agent  
0 rated :

I agree these code examples are not perfect, so I will be escalating this to the product manager for the Developer site.

But I did get that one mostly working at http://qa.jwplayer.com/~todd/demo-playlist-shelf.html

Here’s what I had to do:

1) Add the jQuery script
2) You have a typo in the first line of your page. You are missing "> after the player library URL
3) Copy the code from the /js folder on GitHub and put it in a <script> </script> tag
4) Copy the code from the /css folder and put it in a <style> </style> tag on the page

Hope this helps,
Todd

a...

User  
0 rated :

thanks for your help, that got it to work for me also. still seams like way to much code to do a playlist shelf. and now, where even to start to just have the playlist shelf, no buttons, to cent, to make everything smaller, etc, just way too much work.

thanks, John

This question has received the maximum number of answers.