> For the complete documentation index, see [llms.txt](https://pepper-scripts.gitbook.io/pepper-scripts-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pepper-scripts.gitbook.io/pepper-scripts-docs/docs/de/tools-ui/pepper-loadingscreen.md).
# Pepper Loadingscreen
Der erste Eindruck zählt: Bei **Pepper Loadingscreen** geht ein kurzes Intro-Video nahtlos in einen endlosen Loop über, darunter stehen dein Servername und wechselnde Tipps für neue Spieler. Videos, Texte und Farbe stellst du in einer einzigen Datei ein – kein Framework, keine Abhängigkeiten.
{% hint style="info" %}
🧪 **Getestet auf unserem Dev-Server:** Wir testen alle Skripte selbstverständlich permanent auf unserem eigenen Dev-Server „Pepper Scripts“.
{% endhint %}
{% hint style="success" %}
**Kostenlos** – hol dir Pepper Loadingscreen unter [pepper-scripts.tebex.store](https://pepper-scripts.tebex.store/)
{% endhint %}
### Funktionen
* Intro-Video, das nahtlos in ein Loop-Video übergeht – beide austauschbar, auch ein Bild ist möglich
* Servername, Untertitel und Ladeanzeige
* Wechselnde Tipps mit Zähler und Zeitbalken
* Deutsch & Englisch, eigene Akzentfarbe, einstellbare Abdunklung, optionaler Video-Ton
* Standalone, keine Abhängigkeiten, **0,00 ms** im Spiel (keine Lua-Scripts)
* Alles lokal – keine externen Links oder Schriftarten
### Auf einen Blick
| | |
| ------------------ | ------------------------------------------------------------------- |
| **Version** | 1.0.0 |
| **Framework** | keins erforderlich – funktioniert mit ESX, QBCore, Qbox und anderen |
| **OneSync** | nicht erforderlich |
| **Abhängigkeiten** | keine |
| **Performance** | 0,00 ms |
| **Auslieferung** | Open Source (alle Dateien bearbeitbar) |
### Installation
#### Voraussetzungen
| Voraussetzung | Version |
| ------------- | -------------------------- |
| FiveM-Server | beliebiger aktueller Build |
| Framework | keins erforderlich |
#### Schritte
{% stepper %}
{% step %}
**Download**
Lade `pepper_loadingscreen` aus dem [Cfx.re Portal → Granted Assets](https://portal.cfx.re/assets/granted-assets) herunter.
{% endstep %}
{% step %}
**Kopieren**
Entpacke die Ressource nach `resources/[pepper]/pepper_loadingscreen` – benenne den Ordner nicht um.
{% endstep %}
{% step %}
**Andere Loadingscreens entfernen**
FiveM zeigt nur einen Loadingscreen an – entferne alle anderen aus der `server.cfg` und aus `resources`.
{% endstep %}
{% step %}
**server.cfg**
Trage die Ressource ein:
```cfg
ensure pepper_loadingscreen
```
{% endstep %}
{% step %}
**Anpassen und testen**
Passe `html/config.js` an (siehe **Konfiguration**), starte den Server neu und verbinde dich erneut.
{% endstep %}
{% endstepper %}
{% hint style="info" %}
Loadingscreens werden beim Verbinden heruntergeladen – starte nach jeder Änderung die Ressource neu und **verbinde dich erneut**, um sie zu sehen.
{% endhint %}
#### Multicharacter
Standardmäßig schließt FiveM den Loadingscreen automatisch. Schließt dein Multicharacter-Script ihn selbst (`ShutdownLoadingScreenNui`), kommentiere diese Zeile in der `fxmanifest.lua` ein:
```lua
loadscreen_manual_shutdown 'yes'
```
#### Updates
Sichere vor einem Update `html/config.js` und deine eigenen Videos aus `html/media/` und füge sie danach wieder ein.
### Konfiguration
Alles wird in **`html/config.js`** eingestellt. Nach Änderungen: Ressource neu starten und neu verbinden.
#### Optionen
| Option | Standard | Beschreibung |
| -------------------- | -------------------- | --------------------------------------------------------------- |
| `locale` | `"de"` | Welche Texte aus `locales` verwendet werden: `"de"` oder `"en"` |
| `accentColor` | `"#e5484d"` | Akzentfarbe (Linien, Punkte, Tipp-Balken) |
| `video.intro` | `"media/intro.webm"` | Läuft einmal – WebM oder Bild, `""` = aus |
| `video.loop` | `"media/loop.webm"` | Läuft danach in Schleife – WebM oder Bild, `""` = aus |
| `video.poster` | `"media/poster.jpg"` | Standbild, bis das Video läuft oder falls es nicht lädt |
| `video.sound` | `false` | Video-Ton an/aus |
| `video.volume` | `0.3` | Lautstärke 0–1 |
| `video.shade` | `0.25` | Abdunklung 0–1 für bessere Lesbarkeit |
| `tips.enabled` | `true` | Tipps an/aus |
| `tips.interval` | `8` | Sekunden pro Tipp |
| `tips.shuffle` | `false` | Zufällige Reihenfolge |
| `locales.` | – | Servername, Untertitel, Ladetext und Tipps pro Sprache |
#### Dein eigenes Video
{% stepper %}
{% step %}
**Format**
Verwende **WebM (VP9 oder VP8)** – MP4 mit H.264 kann FiveM **nicht** abspielen. Empfehlung: 1920×1080, 30 fps, möglichst unter 10 MB (Spieler laden die Dateien beim Verbinden herunter).
{% endstep %}
{% step %}
**Umwandeln**
Wandle das Video z. B. mit HandBrake (Voreinstellung „WebM“) oder ffmpeg um:
```bash
ffmpeg -i video.mp4 -c:v libvp9 -b:v 5M -an loop.webm
```
{% endstep %}
{% step %}
**Einbinden**
Leg die Datei in `html/media/` ab und trag den Pfad in `config.js` ein, z. B. `loop: "media/my-video.webm"`.
{% endstep %}
{% endstepper %}
{% hint style="info" %}
**Nur ein Video?** Setze `intro: ""` und verwende dein Video als `loop`. Für einen nahtlosen Übergang sollte das letzte Bild des Intros zum ersten Bild des Loops passen. Statt eines Videos funktioniert auch ein Bild (`.jpg`, `.png`, `.webp`).
{% endhint %}
### FAQ
| Problem | Lösung |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Video schwarz / fehlt | Die Datei ist MP4 oder der Pfad ist falsch – verwende WebM und prüfe den Pfad in `config.js`. |
| Alter Loadingscreen erscheint | Entferne den anderen Loadingscreen aus `server.cfg`/`resources` und leere deinen FiveM-Cache. |
| Änderungen nicht sichtbar | Starte die Ressource neu und **verbinde dich erneut** – Loadingscreens werden beim Verbinden heruntergeladen. |
| Schließt zu früh oder zu spät | Siehe **Multicharacter** – kommentiere `loadscreen_manual_shutdown` ein, wenn dein Multicharacter-Script den Loadingscreen selbst schließt. |
Funktioniert er mit meinem Framework?
Ja. Der Loadingscreen ist Standalone und funktioniert mit ESX, QBCore, Qbox und jedem anderen Framework.
Kostet er Performance?
Nein. Es gibt keine Lua-Scripts – 0,00 ms im Spiel.
Kann ich statt eines Videos ein Bild verwenden?
Ja. Trag einen Bildpfad (`.jpg`, `.png`, `.webp`) als `loop` ein und setze `intro: ""`.
### Changelog
#### 1.0.0 – 2026-09-26
**Erste Version**
* Intro-Video, das nahtlos in ein Loop-Video übergeht (beide austauschbar, Bild möglich)
* Servername, Untertitel und Ladeanzeige
* Wechselnde Tipps mit Zähler und Zeitbalken
* Deutsch und Englisch, Akzentfarbe, Abdunklung, Video-Ton
