Wie kann ich den Player an mein Design anpassen?

Editionen: alle Editionen
Versionen: ViMP 3.5.0+
Player: HTML5

Der ViMP HTML5-Player kann über einfaches CSS individuell an Ihre Design-Anforderungen angepasst werden.

Schritte zum Erstellen eines eigenen Player-Templates:

1. Im Ordner webplayerTemplates unter plugins/stWebPlayerPlugin/einen Ordner erstellen mit einem beliebigen Templatenamen.

2. Der Ordner muss einen css-, js-, images-Ordner sowie eine config.xml enthalten.

3. Die XML-Datei ist folgendermaßen aufgebaut:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <name>Name</name>
    <author>Autor</author>
    <version>1.0</version>
    <loadDefaultCSS>true</loadDefaultCSS>
    <loadDefaultJS>true</loadDefaultJS>
    <js>
        <data>test1</data>
        <data>test2</data>
    </js>
</config>

- die Tags "name", "author", "version" werden für die Darstellung des Auswahlmenüs im Backend verwendet.

- die Tags "loadDefaultCSS" und "loadDefaultJS" legen fest, ob die Standard CSS und JavaScript Datei geladen werden soll.

- das Tag "js" enthält alle Namen der JavaScript-Dateien des js-Ordners. Die Angabe der Dateinamen ist notwendig, um die Reihenfolge in der die js-Dateien geladen werden sollen festzulegen. CSS-Dateien aus dem css-Ordner werden automatisch geladen.

4. Um Bilder des images-Ordners mit CSS zu laden, muss der komplette Pfad angegeben werden. Beispiel:

background: url(/images/webplayerTemplates/<template_name>/images/<image_name>) ;

5. Nach dem Erstellen des Ordners muss ein ./symfony update gemacht werden.

Der einfachste Weg, ein simples Design zu erstellen, ist es, das "loadDefaultCSS" Tag auf true zu stellen, ein CSS-Datei im css-Ordner anzulegen und die Eigenschaften der Standard-CSS zu überschreiben.

 

Zuletzt aktualisiert am 15.05.2017 von Admin.

Zurück