.skin()

.skinPlayer( [settings] )

Description: Customize the player's skin with advanced parameters.

! The [settings] parameters of this function overwrite the skin properties set in UIsettings.qml.

! This function should be called right after the .addPlayer() function.

Settings

fonts - parent object for font related parameters. - hierarchy: fonts

---

- icons - URL for font icon pack to be used for player icons (play, pause, previous, next, fullscreen, etc.). - hierarchy: fonts.icons

- default - URL for font to be used as default. - hierarchy: fonts.default

- secondary - URL for font to be used as secondary. - hierarchy: fonts.secondary

toolbar - parent object for toolbar related parameters. - hierarchy: toolbar

---

- settings - parent object for toolbar settings related parameters. - hierarchy: toolbar.settings

---

- - timeMargin - sets the distance between the mute button and the time/length text ("00:00 / 00:00"). - hierarchy: toolbar.settings.timeMargin

- - opacity - sets the toolbar background opacity (accepts values between 0.0 and 1) - hierarchy: toolbar.settings.opacity

---

- - button - parent object for toolbar button related settings. - hierarchy: toolbar.settings.button

---

- - - width - sets toolbar button width - hierarchy: toolbar.settings.button.width

- - - muteWidth - sets toolbar mute button width (this has it's own parameter because usually the mute button has a smaller width then other buttons) - hierarchy: toolbar.settings.button.muteWidth

- - - hoverGlow - if the buttons should have a glow when hovered (accepted parameters are true or false) - hierarchy: toolbar.settings.button.hoverGlow

- - - borderVisible - if the toolbar button border should be visible or not (accepted parameters are true or false) - hierarchy: toolbar.settings.button.borderVisible

---

- colors - parent object for toolbar colors - hierarchy: toolbar.colors

---

- - background - toolbar background color - hierarchy: toolbar.colors.background

- - button - button icon default color - hierarchy: toolbar.colors.button

- - buttonHover - button icon hover color - hierarchy: toolbar.colors.buttonHover

- - border - button border color - hierarchy: toolbar.colors.border

- - currentTime - color for current time from time/length text (first part of "00:00 / 00:00") - hierarchy: toolbar.colors.currentTime

- - lengthTime - color for video length time from time/length text (second part of "00:00 / 00:00") - hierarchy: toolbar.colors.lengthTime

---

- - progressBar - parent object for progress bar colors. - hierarchy: toolbar.colors.progressBar

---

- - - background - background color for progress bar - hierarchy: toolbar.colors.progressBar.background

- - - viewed - color for already viewed part of progress bar - hierarchy: toolbar.colors.progressBar.viewed

- - - position - color for the position pointer in the progress bar - hierarchy: toolbar.colors.progressBar.position

- - - cache - color for cache/buffer bar in progress bar - hierarchy: toolbar.colors.progressBar.cache

---

- - volume - parent object for volume colors. - hierarchy: toolbar.colors.volume

---

- - - background - background color for volume bar - hierarchy: toolbar.colors.volume.background

- - - color - color of volume bar - hierarchy: toolbar.colors.volume.color

---

- icons - parent for icon related settings (all font icon hex values must start with "\u"). - hierarchy: toolbar.icons

---

- - prev - hex value for Previous Button font icon - hierarchy: toolbar.icons.prev

- - next - hex value for Next Button font icon - hierarchy: toolbar.icons.next

- - play - hex value for Play Button font icon - hierarchy: toolbar.icons.play

- - pause - hex value for Pause Button font icon - hierarchy: toolbar.icons.pause

- - mute - hex value for Mute Button font icon - hierarchy: toolbar.icons.mute

- - subtitles - hex value for Subtitle Menu Button font icon - hierarchy: toolbar.icons.subtitles

- - playlist - hex value for Playlist Menu Button font icon - hierarchy: toolbar.icons.playlist

- - minimize - hex value for Minimize Button font icon - hierarchy: toolbar.icons.minimize

- - maximize - hex value for Maximize Button font icon - hierarchy: toolbar.icons.maximize

Example Code

HTML

<div id="player_wrapper"></div>

JavaScript

wjs("#player_wrapper").addPlayer({ id: "webchimera", theme: "sleek", autoplay: 1, progressCache: 1 });

wjs("#webchimera").skin({
    toolbar: {
        settings: {
            button: {
                borderVisible: false,
                width: 40,
                muteWidth: 37
            },
            timeMargin: 6,
            opacity: 1
        },
        colors: {
            background: "#1b1b1b",
            currentTime: "#d9d9d9",
            progressBar: {
    		background: "#444444",
		viewed: "#cc181e",
		position: "#e5e5e5",
		cache: "#777777"
            },
            volume: {
                color: "#0F7D79"
            }
        }
    }
});

myplaylist = [];
 
myplaylist[] = "http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4";
 
myplaylist[] = "http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4";
 
myplaylist[] = "http://archive.org/download/CartoonClassics/Mel-O-Toons__Peter_and_the_Wolf.mp4";

wjs("#webchimera").addPlaylist(myplaylist);