Right ok to use this player:
http://www.jeroenwijering.com/?page=about do the following, download the player from the site, and then upload the files to your publc_html folder, the open your index.php and do the following:
Include inside the <head></head> tags
Code:
| <script type=\"text/javascript\" src=\"swfobject.js\"></script> |
Then once you have added that add the following where ever you want the movie player to be displayed:
Code:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. | <!--Movie Player Start-->
<p id=\"player2\"><a href=\"http://www.macromedia.com/go/getflashplayer\">Get the Flash Player</a> to see this player.
<script type=\"text/javascript\">
var s2 = new SWFObject(\"flvplayer.swf\",\"playlist\",\"336\",\"157\",\"7\");
s2.addParam(\"allowfullscreen\",\"true\");
s2.addVariable(\"file\",\"playlist.xml\");
s2.addVariable(\"displayheight\",\"170\");
s2.addVariable(\"frontcolor\",\"0x202020\");
s2.addVariable(\"lightcolor\",\"0xffffff\");
s2.addVariable(\'thumbsinplaylist\',\'true\');
s2.addVariable(\'overstretch\',\'fit\');
s2.addVariable(\"width\",\"336\");
s2.addVariable(\"height\",\"157\");
s2.write(\"player2\");
</script>
<!--Movie Player End--> |
Be sure to change the following parts so that the movie player fits correctly:
Code:
| var s2 = new SWFObject(\"flvplayer.swf\",\"playlist\",\"336\",\"157\",\"7\"); |
On this line change the \"336\" (Width) and \"157\" (Height) to the required width and height for your website.
Also notice in this line \"playlist.xml\" i will explain this in a minute.
Then change the following:
Code:
| s2.addVariable(\"width\",\"336\");
s2.addVariable(\"height\",\"157\"); |
Again change the width and height as above here also.
Right now that you have the wdith and height set correctly you will want to change some other section of the movie player to make it suite the style of your website even more. As mentions above you will notice \"playlist.xml\" this file is included in the download. There are 2 options here, you can either use \"playlist.xml\" or \"demo.flv\" ( demo being the name of the movie file, which also must be .flv or .swf ) The demo function ( single file ) will play only 1 movie, where as the playlist.xml will allow you to play many movies simply by clicking the next button on the player, here is how you would edit the playlist.xml:
Open playlist.xml, you should now see something along the lines of this:
Code:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. | <?xml version=\"1.0\" encoding=\"utf-8\"?>
<playlist version=\"1\" xmlns=\"http://xspf.org/ns/0/\">
<trackList>
<track>
<title>name of movie</title>
<creator>author</creator>
<location>movie location</location>
</track>
</trackList>
</playlist> |
now in order to have multiple movie playing on your player simply upload the .flv / .swf file to lets say public_html/movieplayer on your ftp, and for this tutorial we will say you have uploaded COD4.flv and CSS.flv, and would like to add them to the playlist.xml, here is how you do so:
Code:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. | <playlist version=\"1\" xmlns=\"http://xspf.org/ns/0/\">
<trackList>
<track>
<title>COD4 Frag movie</title>
<creator>Your Name Here</creator>
<location>movieplayer/COD4.flv</location>
</track>
<track>
<title>CSS Frag Movie</title>
<creator>Your Name Here</creator>
<location>movieplayer/CSS.flv</location>
</track>
</trackList>
</playlist> |
so as you can see very easy to do, now save and upload this file and both movies will play on your player, you can add as many as you like as long as you keep to the same format.
Right another option is to have an image displayed on the player when no movie is playing, so maybe your logo or just some random image, now if you look at the movie player include code you will notice the following lines:
Code:
| s2.addVariable(\'thumbsinplaylist\',\'true\');
s2.addVariable(\'overstretch\',\'fit\'); |
The top line is telling the movie player that you want to display an image when the movie player loads, so you dont just have a black screen with a white play button in the middle.
The bottom line is telling the movie player to stretch the image to fit the movie player dimensions correctly, ( as covered above when i explain to edit the width and height ) so if you make the image the same size, it will not distort and will look cool ^^.
Right now you will need to add that to the playlist.xml so that it knows where to look for the image and to display it. To do this you will need to edit the playlist.xml file again, and add the following line:
Code:
| <image>movieplayer/preview.jpg</image> |
Where preview.jpg will be your logo etc, so the new playlist file will look something like this:
Code:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. | <playlist version=\"1\" xmlns=\"http://xspf.org/ns/0/\">
<trackList>
<track>
<title>COD4 Frag movie</title>
<creator>Your Name Here</creator>
<location>movieplayer/COD4.flv</location>
<image>movieplayer/preview.jpg</image>
</track>
<track>
<title>CSS Frag Movie</title>
<creator>Your Name Here</creator>
<location>movieplayer/CSS.flv</location>
<image>movieplayer/preview.jpg</image>
</track>
</trackList>
</playlist> |
Notice the line under the movie location, thats all you have to do and the player will display. Now 1 final thing to go over i suppose, the colours of the player. You will notice in the player include code the following lines:
Code:
| s2.addVariable(\"frontcolor\",\"0x202020\");
s2.addVariable(\"lightcolor\",\"0xffffff\"); |
You need to edit after the x on each line to change the colour of the player buttons, now the top colour 202020, is the player background colour ( so the bar that houses the buttons will be a grey colour ) and the ffffff is the cooour of the buttons, the volume etc when you rollover.
well i hope that has helped and cleared up how to se this player, its very good when you get it right
Thanks.
1 2 › »
18.05.2013 - 12:21 - 1 Replies
28.03.2013 -