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

2 JW Player code. one works while the other doesnt. please help


Hi there

I have made another page with a different playlist inserted from the example used here

https://support.jwplayer.com/customer/portal/articles/1439570

my page is here

https://www.thomaspink.com/content/jwplayerv2

the code that works fine is here

<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="hptitle">Video 1: with a playlist button</h1>
<script src="//content.jwplatform.com/players/5veNVJop-pNJIRgmL.js"></script>
<script type="text/javaScript">
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('5veNVJop');
// End Playlist Overlay 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);
}
initOutPlayer('5veNVJop');
</script>
</div>
</div>
</div>


And the code that is not working at all is here

<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="hptitle">Video playlist</h1>
<script src="//content.jwplatform.com/players/5veNVJop-pNJIRgmL.js"></script>
<script type="text/javascript">
jwplayer("container").setup({
file: "//content.jwplatform.com/videos/PbHZ39Ip-F67Awtrj.mp4",
image: "//content.jwplatform.com/thumbs/PbHZ39Ip-1280.jpg",
title: "Another Title"
});
function playTrailer(video, thumb) {
jwplayer().load([{
file: video,
image: thumb
}]);
jwplayer().play();
}
</script>

<div align="center" style="margin:0 0 0 50px">
<a href="javascript:playTrailer('//content.jwplatform.com/videos/Y7RlVG7z-F67Awtrj.mp4', '//content.jwplatform.com/thumbs/Y7RlVG7z-1280.jpg')"><img alt="" border="0" src="/customer/portal/attachments/256826" /></a>
<a href="javascript:playTrailer('//content.jwplatform.com/videos/QsLsaUKX-eqMkbzmF.mp4','//content.jwplatform.com/thumbs/QsLsaUKX-eqMkbzmF.jpg')"><img alt="" border="0" src="/customer/portal/attachments/256827" /></a>
<a href="javascript:playTrailer('//content.jwplatform.com/videos/GMtr6CMq-eqMkbzmF.mp4','//content.jwplatform.com/thumbs/GMtr6CMq-720.jpg')"><img alt="" border="0" src="/customer/portal/attachments/256828" /></a>
<a href="javascript:playTrailer('//content.jwplatform.com/videos/Y7RlVG7z-F67Awtrj.mp4','//content.jwplatform.com/thumbs/Y7RlVG7z-1280.jpg')"><img alt="" border="0" src="/customer/portal/attachments/256829" /></a>
</div>
</div>
</div>
</div>

Some help in this matter would be great

Cheers
Danny

1 Community Answers

Todd

JW Player Support Agent  
0 rated :

I copied and pasted your code that is not working onto our QA server. Here is what I had to do to get it working:

1) Your single-line embed at <script src="//content.jwplatform.com/players/5veNVJop-pNJIRgmL.js"></script> is creating a <div> and calling setup() in its own, so I am embedding just the player library instead:

<script src="//content.jwplatform.com/libraries/pNJIRgmL.js"></script>

2) Your jwplayer(“container”).setup() call is pointing to <div id="container"></div> but I did not see that in your code example, so I added it before your <script type="text/javascript">jwplayer(“container”).setup({

3) Your <a href>s were not appearing on the page at all for me in Chrome, so I changed your style="" to style=“margin:0px 0px 0px 50px” and then they appeared.

Now the code is working for me. And one last thing, you have a Premium license of our player, so you can always use the Submit A Case button in the dashboard to reach us via e-mail. That way you do not have to use the forums and we can e-mail links to test pages, etc.

This question has received the maximum number of answers.