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

I could add image in title, but it brakes a playlist.


Hi,
I use JW Player 7.6.1 Pro version.
I wanted to add thumbnails in video title and playlist. I found that "title" option in playlist is used for video title and for playlist items:

var playerInstance = jwplayer("rockegg-player1").setup({
playlist: [{
file: /path/to/file.mp4,
title: "<img src="http://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">Armatrading, Joan | Opportunity | Rockpalast | 1979 02-15",
image: "image' => 'http://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
},
{
file: /path/to/file2.mp4,
title: "<img src="http://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">Armatrading, Joan | Opportunity | Rockpalast | 1979 02-15",
image: "image' => 'http://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
}],
height: "100%",
width: "100%",
aspectratio: "16:9",
primary: "html5",
skin: {
name: "seven"
},
hlshtml: true,
rtmp: {bufferlength: 5},
responsive: true,
autostart: true
});

It works with video title, but <li> tag for playlist items are empty:
<ul class="jw-playlist jw-reset">
<li class="jw-option jw-text jw-item-0 jw-reset">
<span class="jw-label jw-reset">1.</span>
<span class="jw-name jw-reset"></span>
</li>
<li class="jw-option jw-text jw-item-1 jw-reset">
<span class="jw-label jw-reset">2.</span>
<span class="jw-name jw-reset"></span>
</li>
<li class="jw-option jw-text jw-item-2 jw-reset">
<span class="jw-label jw-reset">3.</span>
<span class="jw-name jw-reset"></span>
</li>
<li class="jw-option jw-text jw-item-3 jw-reset">
<span class="jw-label jw-reset">4.</span>
<span class="jw-name jw-reset"></span>
</li>
<li class="jw-option jw-text jw-active-option jw-item-4 jw-reset">
<span class="jw-label jw-reset"><span class="jw-icon jw-icon-play jw-reset"></span></span>
<span class="jw-name jw-reset"></span>
</li>
</ul>

It looks like that:
http://tinypic.com/view.php?pic=23wa3m&s=9#.V-usHXV97Dd

Can I use image in titles and playlist the same time?
Can I use different title for thumbnails and video title?
Does JW Player provide any ability to add thumbnail to playlist, through "image" option or another way?
I found only custom playlists with thumbnails, but i think playlist with thumbnails looks better.
https://support.jwplayer.com/customer/portal/questions/6062433-hide-playlist-thumbnails-from-jw-player-6
https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_creating/
https://support.jwplayer.com/customer/portal/articles/1428529-display-a-playlist-sidebar
https://support.jwplayer.com/customer/portal/articles/1543546-example-making-your-own-playlist-sidebar

I understand that I can use custom custom HTML playlist, but I wanted to use playlist from JW Player control panel.

3 Community Answers

Alex

JW Player Support Agent  
0 rated :

Hi there,

We do not suggest using images inside of titles or descriptions for this very reason. However, I will be more than happy to work with you to see if we can find an alternative. Are you looking to have the same image appear for each item in your playlist or would they change?

Please let me know. Thank you.

l...

User  
0 rated :

I have different images for each clip, I want to add different images to playlist items. Image in title is not important for me now, I want to add playlist image item.

Ideally it looks like that with durations and thumbnails:
http://tinypic.com/view.php?pic=xmn2oz&s=9

It works for me with custom playlist. I can hide default playlist icon and add a new custom playlist with CSS. But if default JW Player playlist could be customizable it is more flexible and reusable.

I couldn't find hooks or options to replace HTML for default playlist.

Alex

JW Player Support Agent  
0 rated :

We actually have a support article that explains how one may possibly do this with CSS and JavaScript using any playlist, whether its from our platform or not.

Example: Making Your Own Playlist Sidebar – https://support.jwplayer.com/customer/portal/articles/1543546-example-making-your-own-playlist-sidebar

Obviously, the example there look a little different than the one in your screen shot but the general methodology is the same. Please let me know if you need any more help or have any other questions.

Thank you!

This question has received the maximum number of answers.