I posted this some time ago but things have changed a bit and we need to revisit the topic.

The default skin for Allvideos is Bekle. You can download a skin that may be more to your liking from the JW player site. Just search for skins. Once you have a skin you like, we can first look at how AllVideos has their skin and associate files set up.

This is found in /plugins/content/jw_allvideos/jw_allvideos/includes/js/mediaplayer/skins

Here you will find a folder called bekle. This is the default skin they are using and available from the skins download page at JW Player. What we need to do is copy our desired skin to the same location. For example, I have a new skin called myskin. I make a folder called myskin. Now there should be two folders, the original bekle and myskin.

Open All Videos Bekle folder up and note how it is laid out. There is a zip file, and the zip file has also been expanded so that all of the folders and files that are in the zip. There is an important concept here. JW Player can refer directly to a zip file, without the need to expand it. However, AllVideos has expanded it so items in the player can be accessed directly.

So here is what we have inside the bekle folder:

folder - controlbar
folder - display
folder - dock
folder - hd
folder - playlist
file - bekle.xml
file - bekle.zip

You will want to have the same folders and files for your new skin. So in the folder myskin we would see:

folder - controlbar
folder - display
folder - dock
folder - hd
folder - playlist
file - myskin.xml
file - myskin.zip

Now you are ready to switch over to your new skin.

Up to this point we have made no changes in how a new skin is applied from when I first addressed the topic months ago. You will need to modify at least one file, possibly two, depending on your needs. Following are the directions that work for me. Before starting make a backup copy of any files you change in case you need to restore.

1. Open file: /plugins/content/jw_allvideos/jw_allvideos.php

You can do a search for $skin.


Change the line:


/* Preset Parameters */
$template = 'Classic';
$skin = 'bekle';


to:



/* Preset Parameters */
$template = 'Classic';
$skin = 'myskin';







2. If you are only changing the skin on the video player you are done.

3. In All Videos 4.4 a change was made in sources.php that relates to the audio player skin. The audio and video players can use the same skin. If you need to also change the skin on the audio player.


Open file: /plugins/content/jw_allvideos/jw_allvideos/includes/sources.php



Find the section for the audio player:

$audioPlayerEmbed = "
<div id=\"avID_{SOURCEID}\" style=\"width:{WIDTH}px;height:{HEIGHT}px;\" title=\"JoomlaWorks AllVideos Player\"></div>
<script type=\"text/javascript\">
jwplayer('avID_{SOURCEID}').setup({
'file': '{SITEURL}/{FOLDER}/{SOURCE}.{FILE_EXT}',
'image': '{PLAYER_POSTER_FRAME}',
'height': '{HEIGHT}',
'width': '{WIDTH}',
'modes': [
  { 'type': 'flash', src: '{PLUGIN_PATH}/includes/js/mediaplayer/player.swf' },
  { 'type': 'html5' },
  { 'type': 'download' }
],
'autostart': '{PLAYER_AUTOPLAY}',
    'backcolor': '{PLAYER_ABACKGROUND}',
    'frontcolor': '{PLAYER_AFRONTCOLOR}',
    'lightcolor': '{PLAYER_ALIGHTCOLOR}',
    'controlbar': 'bottom'
});
</script>
";



3. Add a line of code after 'controlbar': 'bottom', to include the skin.



$audioPlayerEmbed = "
<div id=\"avID_{SOURCEID}\" style=\"width:{WIDTH}px;height:{HEIGHT}px;\" title=\"JoomlaWorks AllVideos Player\"></div>
<script type=\"text/javascript\">
jwplayer('avID_{SOURCEID}').setup({
'file': '{SITEURL}/{FOLDER}/{SOURCE}.{FILE_EXT}',
'image': '{PLAYER_POSTER_FRAME}',
'height': '{HEIGHT}',
'width': '{WIDTH}',
'modes': [
  { 'type': 'flash', src: '{PLUGIN_PATH}/includes/js/mediaplayer/player.swf' },
  { 'type': 'html5' },
  { 'type': 'download' }
],
'autostart': '{PLAYER_AUTOPLAY}',
    'backcolor': '{PLAYER_ABACKGROUND}',
    'frontcolor': '{PLAYER_AFRONTCOLOR}',
    'lightcolor': '{PLAYER_ALIGHTCOLOR}',
    'controlbar': 'bottom',
    'skin': '{PLUGIN_PATH}/includes/js/mediaplayer/skins/{PLAYER_SKIN}/{PLAYER_SKIN}.zip'
});
</script>
";


The audio player and video player will now share the same skin. To scale the audio player you may need to adjust the width and height from the plug-in control panel.

Great guide - thank you!
Gotta try it out.

What if... Let's say I downloaded yet another skin.
Is it possible to rename the skin zip and the .xml file (easier to me than rather editing the php files) and make it work that way too?

It would be a great lot easier if AllVideos decided to implement this in the plugin settings too.
I hope for this in an update :)

Regards
Chris

Sure - you can also rename the skin.