The HTML5 player of VIMP can be adapted to your individual design requirements via simple CSS modifications.
Steps to create your own player template:
1. Create a new folder with any name within the folder webplayerTemplates under plugins/stWebPlayerPlugin/.
2. The folder must contain a css, js and images folder as well as a file named config.xml.
3. The XML file is structured as follows:
<?xml version="1.0" encoding="UTF-8"?>
<config>
<name>Name</name>
<author>Author</author>
<version>1.0</version>
<loadDefaultCSS>true</loadDefaultCSS>
<loadDefaultJS>true</loadDefaultJS>
<js>
<data>test1</data>
<data>test2</data>
</js>
</config>
- tags "name", "author", "version" are used for the backend options menus.
- tags "loadDefaultCSS" and "loadDefaultJS" define, if the default CSS and JavaScript files shall be loaded.
- tag "js" contains all names of the JavaScript files within the js folder. The information is necessary in order to define the sequence of loading of the js files. CSS files of the css folder will be loaded automatically.
4. In order to load images of the images folder with CSS, the complete path has to be entered.
Example:
background: url(/images/webplayerTemplates/"template_name"/images/"image_name") ;
5. After the folder creation you have to carry out a ./vimp update (or ./symfony update for versions lower than 6.0).
The easiest way to create a simple design is to set "loadDefaultCSS" to true, create a CSS file within the css folder and override the properties of the default CSS.