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

Multiple Playlists and Players

Hi, I am embedding 3 players and 3 playlists on one page. The problem is that the second player is loading the 1st playlist. I have changed the id but still no luck with it.

5 Community Answers

Up Down

Cooper Reid

JW Player Support Agent  
0 rated :

Please make sure your setup Id’s are unique, and that each correspond to a unique div

Html:
<div id="player-1"></div>
<div id="player-2"></div>
<div id="player-3"></div>

Javascript:
jwplayer(‘player-1’).setup({ });
jwplayer(‘player-2’).setup({ });
jwplayer(‘player-3’).setup({ });

-Cooper

Up Down

davidolsan

User  
1 rated :

thanks cooper,
my problem is that javascript:playThis(0) plays only one playlist in both players.

Here is my code:
<div class="row">
<h3>Cate's talks</h3>
<div id="player-1">

<div id="container1">&nbsp;</div>

<div class="TimeCodes clearfix">

<ul>
<div id="log1">&nbsp;</div>
</ul>
</div>
</div>

<script type="text/javascript">// <![CDATA[

jwplayer("container1").setup({
playlist: "/rss/playlist-talks.rss",
displaytitle: false,
width: "100%",
aspectratio: "16:9"
});

var log1 = document.getElementById("log1");
var html1 = log1.innerHTML;

jwplayer("container1").onReady(function(container1,index1){
var playlist1 = jwplayer("container1").getPlaylist("container1");
for (var index1=0;index1<playlist1.length;index1++){
var playindex1 = index1 +1;
html1 += "<li><span class='dropt' title='"+playlist1[index1].title+"'><a href='javascript:playThis("+index1+")'><img height='75' width='120' src='" + playlist1[index1].image + "'</img></br>"+playlist1[index1].title+"</a></br><span style='width:500px;'><p>"+playlist1[index1].description+"</p></span></span></li>"
log1.innerHTML = html1;
}

});
function playThis(index1) {
jwplayer("container1").playlistItem(index1);
}

// ]]></script>




</div>
<div class="row">
<h3>Interview videos</h3>
<div id="player-2">
<div id="container2">&nbsp;</div>
<div class="TimeCodes clearfix">
<ul>
<div id="log2">&nbsp;</div>
</ul>
</div>
</div>
<script type="text/javascript">// <![CDATA[
jwplayer("container2").setup({
playlist: "/rss/playlist-interviews.rss",
displaytitle: false,
width: "100%",
aspectratio: "16:9"
});

var log2 = document.getElementById("log2");
var html2 = log2.innerHTML;
jwplayer("container2").onReady(function(container2,index2){
var playlist2 = jwplayer("container2").getPlaylist("container2");
for (var index2=0;index2<playlist2.length;index2++){
var playindex2 = index2 +1;
html2 += "<li><span class='dropt' title='"+playlist2[index2].title+"'><a href='javascript:playThis("+index2+")'><img height='75' width='120' src='" + playlist2[index2].image + "'</img></br>"+playlist2[index2].title+"</a></br><span style='width:500px;'><p>"+playlist2[index2].description+"</p></span></span></li>"
log2.innerHTML = html2;
}
});
function playThis(index2) {
jwplayer("container2").playlistItem(index2);
}
// ]]></script>



</div>

Up Down

davidolsan

User  
0 rated :

Ok I asked a pro and he sorted the code for me. I will posted below for anyone else having this issue.

<script type="text/javascript">// <![CDATA[

var container = {};


container[1] = jwplayer("container1").setup({
playlist: "/rss/playlist-talks.rss",
displaytitle: false,
width: "100%",
aspectratio: "16:9"
});

var log1 = document.getElementById("log1");
var html1 = log1.innerHTML;

jwplayer("container1").onReady(function(container1,index1){
var playlist1 = jwplayer("container1").getPlaylist("container1");
for (var index1=0;index1<playlist1.length;index1++){
var playindex1 = index1 +1;
html1 += "<li><span class='dropt' title='"+playlist1[index1].title+"'><a href='javascript:playThis(1, "+index1+")'><img height='75' width='120' src='" + playlist1[index1].image + "'</img></br>"+playlist1[index1].title+"</a></br><span style='width:500px;'><p>"+playlist1[index1].description+"</p></span></span></li>"
log1.innerHTML = html1;
}

});

container[2] = jwplayer("container2").setup({
playlist: "/rss/playlist-interviews.rss",
displaytitle: false,
width: "100%",
aspectratio: "16:9"
});

var log2 = document.getElementById("log2");
var html2 = log2.innerHTML;
jwplayer("container2").onReady(function(container2,index2){
var playlist2 = jwplayer("container2").getPlaylist("container2");
for (var index2=0;index2<playlist2.length;index2++){
var playindex2 = index2 +1;
html2 += "<li><span class='dropt' title='"+playlist2[index2].title+"'><a href='javascript:playThis(2, "+index2+")'><img height='75' width='120' src='" + playlist2[index2].image + "'</img></br>"+playlist2[index2].title+"</a></br><span style='width:500px;'><p>"+playlist2[index2].description+"</p></span></span></li>"
log2.innerHTML = html2;
}
});


function playThis(containerId, index1) {
container[containerId].playlistItem(index1);
}

// ]]&gt;</script>

Up Down

Cooper Reid

JW Player Support Agent  
0 rated :

You can target specific players by using an id :

jwplayer(‘my-third-player’).load({file: ‘some-video.mp4’});

Cooper

Up Down

siddan.web

User  
0 rated :

Hi

I have similiar problem and I don´t understand the solution posted by davidolsan.


This simple example is working:
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>

<script>
jwplayer("player1").setup({ file: "../files/canvas1.mp4", height: 200 });
jwplayer("player2").setup({ file: "../files/canvas2.mp4", height: 200 });
jwplayer("player3").setup({ file: "../files/canvas3.mp4", height: 200 });
</script>


Below is not working. The second part of links with ID myElement2 are playing in the first video player with ID myElement...
Example page: http://sidspace.co.nf/jwp/611-alink.htm



<div id="myElement">Loading the player...</div>
<ul>
<li><a href="javascript:myElement('../files/canvas1.mp4','files/leaves.jpg')">Canvas 1 (local)</a></li>
<li><a href="javascript:myElement('http://youtu.be/AW07GZ5UzJc','files/underwater.jpg')">Under water (YT)</a></li>
<li><a href="javascript:myElement('../files/canvas2.mp4','files/leaves.jpg')">Canvas 2 (local)</a></li>
</ul>


<strong>Javascript</strong>
<pre><code data-language="javascript">
<script type="text/javascript">
jwplayer("myElement").setup({
title: "Canvas 1",
description: "Leaves touching water",
image: "",
file: "../files/canvas1.mp4",
width: 400,
height: 330,
});
</script>
<script>
function myElement(video,thumb) {
jwplayer().load([{
file: video,
image: thumb,
}]);
jwplayer().play();
};
</script>

PART 2

<div id="myElement2">Loading the player...</div>
<ul>
<li><a href="javascript:myElement2('../files/canvas1.mp4','../files/leaves.jpg')">Canvas 1 (local)</a></li>
<li><a href="javascript:myElement2('https://www.youtube.com/watch?v=AW07GZ5UzJc','../files/underwater.jpg')">Under water (YT)</a></li>
<li><a href="javascript:myElement2('../files/canvas2.mp4','../files/leaves.jpg')">Canvas 2 (local)</a></li>
</ul>
</code></pre>

<strong>Javascript</strong>
<pre><code data-language="javascript">
<script type="text/javascript">
jwplayer("myElement2").setup({
title: "Under water",
description: "View from under water",
image: "",
file: "https://www.youtube.com/watch?v=AW07GZ5UzJc",
width: 400,
height: 330,
});
</script>
<script>
function myElement2(video,thumb) {
jwplayer().load([{
file: video,
image: thumb,
}]);
jwplayer().play();
};
</script>

This question has received the maximum number of answers.