This documentation is not fully translated! The language is for a part in Dutch! You can use Google Translate for a quick translate. If you want to translate it, you can mail me: @jasler.nl

Function: playerTemplate (since BuckPlayer 1.0)

This BuckPlayer function is about the 'playerTemplate' variable in the javascript. How does it works?

In BuckPlayer kan je verschillende templates hebben per player. Want, misschien zijn 30 allemaal dezelfde players een beetje aan de saaie kant? Om het nog leuker te maken, is BuckPlayer zo gemaakt dat jij zelf ook een eigen template kan maken.

How does it works?

In de CSS zit automatisch de 'default' style. Deze style is de hoofd-style. Als je naar de CSS kijkt, zal je zien dat deze is opgebouwd in classes. De hoofd-class van BuckPlayer heet 'bplr_skin_{skin_name}_container'. Wanneer je een eigen style maakt, bijvoorbeeld 'bucky', zal je CSS er als volgt uitzien:

.bplr_skin_bucky_container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
}

(Note: This is a rule in the BuckPlayer V1.0 CSS code!)

In de javascript heb je de value 'playerTemplate', deze value zou je kunnen gebruiken om een andere template te gebruiken, mits deze extern geimporteerd is. Dit kan je via HTML doen. Een voorbeeld:
<link rel="stylesheet" href="/css/buckplayer_template_stylub.css" />

Variable examples

Als je de template 'red' hebt, kan je 'default' veranderen naar 'red'. Dan zal de gekozen player van kleur veranderen. Voorbeeld:
playerTemplate: 'default'

Will be:
playerTemplate: 'red'

Variable rules

De variable 'playerTemplate' is bedoelt als een string, letters. Deze variable zal werken van letters A-Z en a-z. Cijfers mogen aleen aan het einde, of tenmiste na de eerste letter. Andere characters (zoals @, &) zullen het script en de CSS laten breken. Ook werkt CSS op deze manier niet. Het is dan ook erg afgeraden om het op deze manier te doen.

Example

Here a full-working example. When you use a part of/this code, you can change 'default' to a other style, IF you imported somewhere on the page (or CSS) the link to that template. Example:

<div id="player1"></div>

<script>
buckPlayer.startPlayer({
    id: 'some_player_id',
    playerTemplate: 'default',
    autoStart: false,
    volume: 100,
    videoUrl: ['/path/to/video.mp4', '/path/to/video.ogv', '/path/to/video.webm'],
    width: '100%',
    height: '200',
    allowFullscreen: true,
    playerBalkTimer: 5
});
</script>

Current version BuckPlayer: 1.0.31.1414