Can I customize the web Player?
Well, if you have checked JW player’s FAQ, searched Flow player’s forum and seen
this article. You would find the answer is yes. Nearly every web player allows you to change the skins now, but each has a unique approach. It is hard to say which is better, you could just find the one which suits your needs best.
And now please let me give you an analysis on changing skins for the three major web players – JW player, Flow Player and Moyea PlayerBox.
1, For JW Player
There are two approaches for JW Player. One is based on the .xml file which allows the user to change any state of any components of the web player.
Let’s take the following code for example:
<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="328" height="200">
<param name="movie" value="player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=video.flv&image=preview.jpg" />
<embed
type="application/x-shockwave-flash"
id="player2"
name="player2"
src="player.swf"
width="328"
height="200"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=video.flv&image=preview.jpg"
/>
</object>
Add “&skin=beelden.xml” behind “file=video.flv&image=preview.jpg”. The changed code should be:
<param name="flashvars" value="file=video.flv&image=preview.jpg&skin=beelden.xml" />
On the other hand if you use Javascript, you can refer the following code:
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','800','400','9');
so.addParam('flashvars','file=video.flv');
so.addParam('allowfullscreen','true');
so.write('videoDiv');
</script>
Add “&skin=beelden.xml” behind “’flashvars’,’file=video.flv’” to realize changing skins.
Or you can write the code like this:
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','800','400','9');
so.addParam('allowfullscreen','true');
so.addVariable('video','video.flv');
so.addVariable("skin","beelden.xml");
so.write('videoDiv2');
</script>
The other way is to change the SWF skin file directly. If you are not familiar with code, I suggest you to change the SWF file directly. What you need to do is upload the new skin in your server and change the path of <param name="movie" value="new_skin.swf" />.
2, For Flow Player
Flow Player use the “configuration” file to change skins. You can get the “configuration” file on
this page. Insert the generated strings into <script> tag.
This is a simple code, just for example:
{
canvas:
{backgroundColor: "#ae38c7"}
,
plugins: {
controls: {
url: 'flowplayer.controls-3.1.5.swf',
bufferGradient: 'none',
backgroundGradient: 'high',
volumeSliderGradient: 'none',
buttonColor: '#ae38c7',
tooltipColor: '#C9C9C9',
durationColor: '#ffffff',
volumeSliderColor: '#D00000',
timeColor: '#B1E0FC',
sliderColor: '#C9C9C9',
borderRadius: '0px',
timeBgColor: '#262626',
buttonOverColor: '#FF0000',
tooltipTextColor: '#D00000',
backgroundColor: '#929292',
progressGradient: 'none',
progressColor: '#D00000',
bufferColor: '#C78F8E',
sliderGradient: 'none',
height: 24,
opacity: 1.0 }}}
With this method; you could set the control bar’s assignments to generate the most suitable “configuration” file. And do not need to set the parameters manually. It makes it much easier than JW player but also limited its flexibility. Because you can only change the control bar’s color and angle or add or remove some buttons. If you want a totally different style web player, you need to use another way.
Besides use the “configuration” file, you can use another way to change skins called “Tube Skin”. With this method, the HTML code would be different to the default code:
<script type="text/javascript" src="http://www.flowplayer.org/js/flowplayer-3.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<a href="flowplayer-700.flv"
style="display:block;width:425px;height:300px;"
id="tube">
</a>
<script language="JavaScript">
flowplayer("tube", "../flowplayer-3.1.5.swf", {
plugins: {
controls: {
url: '../flowplayer.controls-tube-3.1.5.swf'
} }});
</script>
When you use the above method, you should better change the file’s path to the absolute path. But I still can not tell the difference between “id=player” and “id=tube”, if someone knows please tell me.
3, For Moyea PlayerBox
Not like JW Player or Flow Player, PlayerBox is actually a web player creator. It allows you to rapidly combine a web player through the drag and drop technology. So you can make one new web player to fit your needs every time you want to change the player skins.
On the other side, just like JW Player or Flow Player, you can change skins by modify the HTML code with “&skin=” parameter. Firstly you can make one skin file with PlayerBox or purchase a template to use directly. And then after you uploaded the new skin in your server, you can call it by adding “&skin=blueprint.swf” behind “videoFile=2.flv&image=2.jpg”.
You will notice that both JW player and Moyea PlayerBox use “&skin=” parameter. The difference is JW player called an .xml file but PlayerBox called another stand-alone .swf file. But it is easier to make a new skin with PlayerBox.
Hope you will get some useful info from this article and if you have any question about it please leave a comment or PM me.
