This codes are for a functional player with xml playlist, with big thumbnails, video duration display, preview image, you tube and local videos and rating plugin.
I will explain the most important parts of the code so that you can customize it acording to your needs. I made this player for my website so you can see how it looks before you continue:
Player preview
http://www.felicitaswoll-fan.net84.net/site293003 once on the website go to videos. I will soon change the location of the web when its finished so the link may not work in a few weeks but don't worry, I will post the codes here.
The player
Create a blank html file, paste the following code and save it as player.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video Player</title>
<style type="text/css">
<!--
body {
background-color: #151515;
}
-->
</style></head>
<body>
<script type="text/javascript" src="swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','750','350','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=playlist.xml&backcolor=151515&frontcolor=FFFFFF&lightcolor=AAAAAA&screencolor=151515&playlistsize=360&skin=modieus.swf&bufferlength=7&volume=60&plugins=rateit&playlist=right&displayclick=none');
so.write('player');
</script>
</body>
</html>
The source/components files
src="swfobject.js" -> This is the java script for the player. if is not in the same folder as player.html, for example in a folder called components, you should put: src="components/swfobject.js" or
the full domain path to the swfobject.js file (i.e http://yourdomain.com/components/swfobject.js)
background-color: #151515; -> This determines the background color of your page. Change the hex code for the color that you need
('player.swf','mpl','750','350','9') -> The dimensions of the player. Before setting the size of the player you may have to make some calculations.
750 is the total width of the player including the playlist (we set the playlist dimension later), 350 is the total height in pixels of the player but it includes the controls bar which is about 30 px in height. So the height of the display screen is not 350 but 320 pixels. leave the 9 as it is.
allowfullscreen','true -> if you want to disable the fullscreen feature change it to false
The Flash vars
The flash vars allow you to customize your player.
&file=playlist.xml -> this is the path for the xml playlist file that we will make later on.
If your xml playlist file is in the same folder as player.html leave it as it is but if you have it in a different folder change it (&file=folder name/playlist.xml)
&backcolor=151515 -> This is the color of the playlist and the control bar of the player. I set it the same as the dark color of the page but you can change it to any color that you want, just change the code (without the # symbol)
&frontcolor=FFFFFF -> This is the color of the text and the controls. In this case is white to distinguish if from the dark &backcolor of the background and the playlist
&lightcolor=AAAAAA -> Determines the color of the selected video on the playlist and when you hover the
mouse over the playlist. In this case is a light gray to distinguish it from the dark background and the white text of the playlist
&screencolor=151515 -> The color of the screen when the video is stopped or when there is nothing playing. Is not very important here because we will use a preview image of the videos that will cover all the screen so it will not be visible.
In any case you should eighter set it to be the same color of the background (in my case 151515) or to pure black: 000000
&playlistsize=360 -> This is the playlist width. The height is already set to 350, which the total height of the player.
Is very important to make calculations here. Think of what is the aspect ratio of your videos and how big you want your videos to by displayed.
So the size of my dysplayed videos is: 750(total player width) - 360(playlist width) = 390. So 390 is the maximum with of the video and the heigh is automatically calculated to maintain the aspect ratio of your video.
But in any case it will not exceed 320 pixels in height because if you remember we set the total height to 350 and 30 px is the control bar.
This settings are for a standard 4:3 aspect ratio because all my videos are 320x240 but because of this settings they are resized to 390 in width and the height is auto calculated in order to keep the 4:3 aspect ratio but is surely bigger that 240, its about 290. So my videos are 320x240 but are displayed a bit bigger than the original size.
&skin=modieus.swf -> This is the name of the skin that im using, the modieus skin. You can download skins from the AddOns page. If you don't include this code it will appear the default skin
Download the skin that you like and place it in the same folder as player.html. If you put it in a different folder you have to adapt the code and specify the name of that folder, for example if the folder is called skins-> &skin=skins/modieus.swf
&bufferlength=7 -> The buffer lenght in seconds. How many seconds of video you want to be loading before the video starts playing. use numbers between 5 and 10, its the most common. Longer than 10 seconds, specially if the video file is very large, will make the viewer wait too long for the video to load
&volume=60 -> Default volume in percentage (%). Mine is to 60% you can set it to 100% or any value that you want. Notice, you don't have to put the % symbol, just the number.
&plugins=rateit -> This is the plugin name. In this case its a rating plugin that will allow your visitors to rate your videos. You don't need any additional files, just add the id name of the plugin and your good to go. If you want another plugin, for example Viral, all you need to do is to change the name to: &plugins=viral
IMPORTANT: this plugins are only visible after you upload the player.html file to your server, you will not be able to see it locally. If you want more plugins just go to the AddOns page and once you find the one that you like, take its name ant put it in the string &plugins="plugin name here" and your done, no coding , no nothing, just the name.
&playlist=right -> This determines the location of the playlist, in this case is on the right side of the player. You can change that to "over" (without the quotes) if you want it on top of the player or to "bottom" if you want it under the player
&displayclick=none -> This is the play icon that appears when the video is stopped or paused. I set it to none because it was hiding part of the preview image, it was giding part of the woman's face and I didin't like it. You can change that too:
&displayclick=play -> the play button will apper on the center of the screen when the video is paused or stopped. If you decide to delete the entire "&displayclick=play" code, the play button will sill appear because its a default state of the player. If you don't want anyhthing put &displayclick=none like I did
&displayclick=mute -> a mute button will appear on the center of the screen when the video is paused or stopped
&displayclick=fullscreen -> The fullscreen button will appear on the center of the screen when the video is paused or stopped
&displayclick=next -> The next button will appear on the center of the screen when the video is paused or stopped.
So that's all I have on my player. If you want more features I suggest you to create your own player using the player generator page
http://www.longtailvideo.com/support/jw-player-setup-wizard?example=1 where you set all the features that you want and than it will generate the code for you
Now lets set up the playlist for our player
Open your notepad and on a blank document paste this code and seve it as playlist.xml in the same folder as player.html
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
<channel>
<item>
<title>Berlin Berlin Scenes</title>
<description>Description of the video goes here</description>
<media:content url="http://www.felicitaswoll-fan.qupis.com/flv/berlin.mp4" type="video/x-flv"duration="310"/>
<media:thumbnail url="snapshots/berlin.jpg" type="image/jpeg" />
<author>Felicitas Woll Fan</author>
</item>
<item>
<title>ZDF interview 2006</title>
<description>Back scene of Wetten Dass Interview for ZDF on 2006</description>
<media:content url="http://www.youtube.com/watch?v=HYYW2dutsnU" type="video/x-flv"/>
<media:thumbnail url="snapshots/zdf_2006.jpg" type="image/jpeg" />
<author>Felicitas Woll Fan</author>
</item>
<item>
<title>König Drosselbart Scenes</title>
<description>With Felicitas Woll on the ARD channel 25.12.2008</description>
<media:content url="videos/konig.flv" type="video/x-flv"duration="310"/>
<media:thumbnail url="snapshots/konig.jpg" type="image/jpeg" />
<author>Felicitas Woll Fan</author>
</item>
</channel>
</rss>
On this playlist there are 3 items for 3 videos but the playlist can have as much items as you want
<title>König Drosselbart Scenes</title> -> The title of your video
<description>Description of the video goes here</description> -> self explained. The description of the video. But it can only have 2 lines. If your playlist width is bigger, those 2 lines will be longer and you will be able to put a longer description.
<media:content url="url" ->
This is where you have to put the complete url path (http:// included) to your video file. The video files suported are flv and mp4. For example: http://yourdomain.com/videos/video1.flv
But as you can see on the 3rd item, I have a different url path. in this case, the path is "videos/konig.mp4" and that's because on the root folder of my website I have a folder called videos where the konig.mp4 video is located. So I could have
used http://www.felicitaswoll-fan.net84.net/videos/konig.mp4 but i used only videos/mkonig.mp4 instead but its the same.
On the first item I had to use the full url path because that video is located on another server that the server where I have my website.
type="video/x-flv" -> this is the file type, I leave it always as flv because I don't know which is the code for mp4 but I didn't have any problems with that so you can leave it as it is.
duration="310" -> Duration of the video in seconds. Calculating the duration of your videos is very easy. For example if your video is 4 minutes and 7 seconds (4:07) than 60x4 =240 +7 = 247
<media:thumbnail url="snapshots/berlin.jpg" -> This is the thumbnail that will appear on the playlist and it will also act as image preview on the video screen.
The size of the image must be big enough to cover the display screen which in my case is 390x290 aprox. If you make the image too small, say for example 60x60 it will be resized to cover the entire screen and the quality will be very bad. Probably the best size is 480x360.
Anyways, try to set the aspect ratio to be the same as your video and the size close to the size of the dysplay screen. For the playlist thumb is used the same image but scaled down,so with 1 image you have enough for the playlist and the preview for the video screen.
In my case, as you can see I have all the preview images in the snapshots folder. Its always a good idea to put the images on a separate folder just for organisation purpose, specially if you have a large playlist. NoTE you must include the format extension (.jpg) in my case "berlin.jpg" for the first item
<author>Felicitas Woll Fan</author> ere you can put your name or the author of the video, it should appear on the
playlist.
All the codes are checked so if is not working, you miss typed when you changed the data
Just curious... Does the rateit plugin work for you?
I just get errors from their server when I try to use it.