
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