JW Player is an open source, flash/HTML5 media player. The latest JW Player 5 supports png theming. When I first embeded JW Player 5 I was unsure how to set the height of media items in the playlist. Here's how to do it.
Some sample javascript code:
jwplayer("container").setup({
flashplayer: "player.swf",
height: 400,
width: 400,
volume: 80,
playlist: [
{file: "Houseboats.mp3", title:"Kenji Williams - Houseboats" },
{file: "This.mp3", title:"Professor Kliq - This"}
],
"playlist.position": "bottom",
"controlbar": "top",
skin:'customSkin.zip'
});
The important attribute is in bold. The way to set the height of playlist items is to control the total height of the player, and to know the height of the control bar. In this example, the control bar was 20 pixels height. If we subtract that from 400, we get 380 pixels height for the JW player playlist - that's determined automatically. If we want 4 media items to show in the playlist, we need the height of each playlist item to be 95 pixels high.
Looking in our "customSkin.zip" skin folder in the playlist folder, we find two files: item.png and itemOver.png. The height of these pngs determines the height of the the playlist item. So we need to modify these pngs so their height is 95 pixels high.
Here's an easy formula for setting the correct height of the JW Player:
// Make sure item.png and itemOver.png are set to this height!
itemHeight = 95;
controlBarHeight = 20;
itemsToShow = 4;
totalHeight = controlBarHeight+(itemHeight*itemsToShow);
jwplayer("container").setup({
flashplayer: "player.swf",
height: totalHeight,
width: totalHeight,
volume: 80,
playlist: [
{ file: "Houseboats.mp3", title:"Kenji Williams - Houseboats" },
{ file: "This.mp3", title:"Professor Kliq - This"}
],
"playlist.position": "bottom",
"controlbar": "top",
skin:'customSkin.zip'
});
JW Embedder Reference Guide - Has a lot of code examples for how to embed the JW Player.
JW Player 5 Setup Wizard - Easily create JW Player embed code to meet your needs.