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

Load new playlist


Hey
I saw this demo page loading a new playlist and I thought that would be awesome.
https://developer.jwplayer.com/jw-player/demos/basic/loading-new-playlists/

I am already using inline playlist with a playlist bar beneath the video player and I am having difficulties merging this into what I already have.

If anyone cuold help me out that would be swell :)

Below is my working player with inline playlist:
------

<div id="container">&nbsp;</div>
<ol id="list">&nbsp;</ol></div>
<script type="text/javascript">
var playerInstance = jwplayer("container");
playerInstance.setup({
playlist: [
{
title: "Orbs",
file: "https://youtu.be/l2ANM2vULoQ",
image: "Img.jpg",
description: "Video One",
},{
title: "Ring",
file: "https://youtu.be/2LCNnio6aYs",
image: "Img.jpg",
description: " Video Two",
},{
title: "Nature",
file: "https://youtu.be/4_JNxbgTCdE",
image: "Img.jpg",
description: "Video Three",
},{
title: "Underwater",
file: "https://youtu.be/AW07GZ5UzJc",
image: "Img.jpg",
description: "Video Four",
},{
title: "Gold dust",
file: "https://youtu.be/ENy-eY_92ko",
image: "Img.jpg",
description: "Video Five",
},{
title: "Time",
file: "https://youtu.be/CDjkkE_7ntM",
image: "Img.jpg",
description: "Video Six",
}],
displaytitle: true,
width: "100%",
aspectratio: "16:9",
});

var list = document.getElementById("list");
var html = list.innerHTML;
playerInstance.on('ready',function(){
var playlist = playerInstance.getPlaylist();
for (var index=0;index<playlist.length;index++){
var playindex = index +1;
html += "<li><a href='javascript:playThis("+index+")'><img alt='"+playlist[index].title+"'src='" + playlist[index].image + "'/>"+playlist[index].title+"</a><span>"+playlist[index].description+"</span><div style='clear:both'></div></li>"
list.innerHTML = html;
}
});
function playThis(index) {
playerInstance.playlistItem(index);
}
</script>

---------


Somehow this below Load playlist script needs to be inserted without breaking the already exisiting playlist with playlist bar.

-------
function loadPlaylist(thePlaylist) {
jwplayer().load(thePlaylist)
}
--------
and also this perhaps, located in the source file config.json
--------
"apiCalls": [
"load(playlist)"
],
--------



Below is a bold try without my previoys playlist bar to make it simple, which obviously is not working. The player isnt´t even showing up:

----------
<a href="javascript:loadPlaylist(playlistOne)">Tears of Steel</a><br/>
<a href="javascript:loadPlaylist(playlistTwo)">Big Buck Bunny</a><br/>
<a href="javascript:loadPlaylist(playlistThree)">Multi-Item Playlist</a>


<div id="container">&nbsp;</div>
<script type="text/javascript">
var playerInstance = jwplayer("container");
playerInstance.setup({
var playlistOne = [{
title: "Orbs",
file: "https://youtu.be/l2ANM2vULoQ",
image: "https://i.ytimg.com/vi/l2ANM2vULoQ/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68", description: "Video One",
}];

var playlistTwo = [{
title: "Ring",
file: "https://youtu.be/2LCNnio6aYs",
image: "https://i.ytimg.com/vi/2LCNnio6aYs/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68",
description: " Video Two",
},{
title: "Nature",
file: "https://youtu.be/4_JNxbgTCdE",
image: "https://i.ytimg.com/vi/4_JNxbgTCdE/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68",
description: "Video Three",
}];

var playlistThree = [{
title: "Underwater",
file: "https://youtu.be/AW07GZ5UzJc",
image: "https://i.ytimg.com/vi/AW07GZ5UzJc/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68",
description: "Video Four",
},{
title: "Gold dust",
file: "https://youtu.be/ENy-eY_92ko",
image: "https://i.ytimg.com/vi/7pXhjM6Ds7E/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68",
description: "Video Five",
},{
title: "Time",
file: "https://youtu.be/CDjkkE_7ntM",
image:"https://i.ytimg.com/vi/CDjkkE_7ntM/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68", description: "Video Six",
}];

});
function loadPlaylist(thePlaylist) {
jwplayer().load(thePlaylist)
}
</script>
-----------

1 Community Answers

Todd

JW Player Support Agent  
0 rated :

I don’t think you can declare a var inside of our setup() call. Try this:

var playlistOne = [{
    title: "Orbs",
    file: "https://youtu.be/l2ANM2vULoQ",
    image: "https://i.ytimg.com/vi/l2ANM2vULoQ/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68", description: "Video One",
}];
var playerInstance = jwplayer("container");
playerInstance.setup({
    playlist: playlistOne
});

This question has received the maximum number of answers.