I've built my first playlist, with thumbnails. So I have the list on the right with titles and little thumbnails, good.
I would like to display in the main portion, where the video will play, an image different from the little thumbnail, is it possible?
TIA
greg
We do not have a built-in capability to use different images for the poster image and a thumbnail, but if you make a custom listbar via Javascript and CSS, you can define a different image URL to use as your thumbnail. Here’s a code example:
<script type='text/javascript'> jwplayer('demo').setup({ playlist: [{ file: "bunny.mp4", image: "bunny.jpg", title: "Big Buck Bunny trailer", thumbnail: 'bunny-thumb.jpg', description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis velit non leo porta laoreet. Donec blandit tincidunt placerat. Curabitur commodo erat sit amet sem elementum aliquam." },{ file: "sintel.mp4", image: "sintel.jpg", title: "Sintel trailer", thumbnail: 'sintel-thumb.jpg', description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis velit non leo porta laoreet. Donec blandit tincidunt placerat. Curabitur commodo erat sit amet sem elementum aliquam." },{ file: "tears.mp4", image: "tears.jpg", thumbnail: 'tears-thumb.jpg', title: "Tears of Steel trailer", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis velit non leo porta laoreet. Donec blandit tincidunt placerat. Curabitur commodo erat sit amet sem elementum aliquam." }], width: '480', height: '270', skin: 'skins/glow/glow-edited.xml', }); jwplayer().onReady(function(){ var myVideos = jwplayer().getPlaylist(); for (var i = 0; i < myVideos.length; i++) { //put the code to get your rating here document.getElementById('listbar').innerHTML += '<div class=listbar_item onClick="jwplayer().playlistItem(' + i + ');"><img style="float: left; height: 60px; margin-right: 5px;" src=' + myVideos[i].thumbnail + '><b>' + myVideos[i].title + '</b><br>' + myVideos[i].description + '</div>'; } }); </script>and the CSS I’m using is:
<style>.listbar_item {
display: block;
background-color: silver;
width: 480px;
margin-bottom: 10px;
}
Does this work with the flash player?
