Skip to content

Commit 7460af7

Browse files
skerbisskerbis
committed
Add German README (README_de.md)
1 parent 1629913 commit 7460af7

File tree

1 file changed

+373
-0
lines changed

1 file changed

+373
-0
lines changed

‎README_de.md‎

Lines changed: 373 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,373 @@
1+
# Vidstack Player für REDAXO
2+
3+
Moderner Media-Player (Video & Audio) mit vollständiger [Vidstack.io](https://vidstack.io)-Unterstützung für REDAXO CMS.
4+
5+
## Features
6+
7+
✅ **Universelle Medienunterstützung** - Video UND Audio-Wiedergabe (nicht nur Video!)
8+
✅ **Moderne Fluent API** - Method-Chaining für sauberen, lesbaren Code
9+
✅ **Mehrere Plattformen** - Lokale Dateien, YouTube, Vimeo
10+
✅ **Untertitel & Captions** - Vollständige WebVTT-Track-Unterstützung
11+
✅ **Adaptive Qualität** - Mehrere Quellen für Qualitätswechsel
12+
✅ **Barrierefreiheit** - WCAG-konform mit ARIA-Labels
13+
✅ **FFmpeg-Integration** - Video-Infos und Tools im Backend-Mediapool
14+
✅ **CKE5-Integration** - Automatisches oEmbed-Parsing
15+
✅ **Cache-Busting** - Automatische Asset-Versionierung
16+
✅ **Performance** - Defer/Async-Script-Loading
17+
18+
## Installation
19+
20+
```bash
21+
# Via Composer (empfohlen)
22+
composer require friendsofredaxo/vidstack
23+
24+
# Oder via REDAXO Installer
25+
# Suche nach "Vidstack Player" im AddOn-Installer
26+
```
27+
28+
## Schnellstart
29+
30+
### Einfaches Video
31+
32+
```php
33+
<?php
34+
use FriendsOfRedaxo\VidstackPlayer\VidstackPlayer;
35+
36+
$player = (new VidstackPlayer('video.mp4'))
37+
->title('Mein Video')
38+
->poster('poster.jpg')
39+
->attributes(['controls' => true]);
40+
41+
echo $player->render();
42+
```
43+
44+
### Einfaches Audio
45+
46+
```php
47+
$player = (new VidstackPlayer('audio.mp3'))
48+
->title('Podcast Episode 1')
49+
->attributes(['controls' => true]);
50+
51+
echo $player->render();
52+
```
53+
54+
### YouTube-Video
55+
56+
```php
57+
$player = (new VidstackPlayer('https://youtube.com/watch?v=dQw4w9WgXcQ'))
58+
->title('Never Gonna Give You Up');
59+
60+
echo $player->render();
61+
```
62+
63+
## Fluent API Referenz
64+
65+
### Kern-Methoden
66+
67+
```php
68+
$player = (new VidstackPlayer('source.mp4'))
69+
->title('Titel') // Titel setzen
70+
->lang('de') // Sprache setzen (Standard: 'de')
71+
->poster('poster.jpg', 'Alt-Text') // Poster-Bild setzen
72+
->aspectRatio('16/9') // Seitenverhältnis setzen
73+
->thumbnails('thumbs.vtt') // Thumbnail-Track setzen
74+
->attributes(['controls' => true]) // Mehrere Attribute setzen
75+
->attr('muted', true) // Einzelnes Attribut setzen
76+
->render(); // HTML generieren
77+
```
78+
79+
### Untertitel & Captions
80+
81+
```php
82+
$player->track(
83+
src: 'subtitles.vtt',
84+
label: 'Deutsch',
85+
srclang: 'de',
86+
kind: 'subtitles', // subtitles|captions|descriptions|chapters|metadata
87+
default: true
88+
);
89+
```
90+
91+
### Mehrere Quellen (Adaptive Qualität)
92+
93+
```php
94+
$player->multipleSources([
95+
['src' => 'video-1080p.mp4', 'width' => 1920, 'height' => 1080, 'type' => 'video/mp4'],
96+
['src' => 'video-720p.mp4', 'width' => 1280, 'height' => 720, 'type' => 'video/mp4'],
97+
['src' => 'video-480p.mp4', 'width' => 854, 'height' => 480, 'type' => 'video/mp4']
98+
]);
99+
```
100+
101+
## Frontend-Integration
102+
103+
### Assets einbinden
104+
105+
```php
106+
<?php
107+
use FriendsOfRedaxo\VidstackPlayer\AssetHelper;
108+
?>
109+
<!DOCTYPE html>
110+
<html>
111+
<head>
112+
<?php echo AssetHelper::getCss(); ?>
113+
</head>
114+
<body>
115+
<!-- Dein Content -->
116+
117+
<?php echo AssetHelper::getJs(defer: true); ?>
118+
</body>
119+
</html>
120+
```
121+
122+
### Asset Helper Optionen
123+
124+
```php
125+
// CSS mit benutzerdefinierten Attributen
126+
echo AssetHelper::getCss(['media' => 'screen'], cachebuster: true);
127+
128+
// JS mit defer (empfohlen für Performance)
129+
echo AssetHelper::getJs(defer: true);
130+
131+
// JS mit async (mit Vorsicht verwenden)
132+
echo AssetHelper::getJs(async: true);
133+
134+
// Benutzerdefinierte Attribute
135+
echo AssetHelper::getJs(
136+
defer: true,
137+
attributes: ['type' => 'module', 'crossorigin' => 'anonymous'],
138+
cachebuster: true
139+
);
140+
141+
// Cache-Busting deaktivieren
142+
echo AssetHelper::getCss(cachebuster: false);
143+
```
144+
145+
## Erweiterte Beispiele
146+
147+
### Vollständiges Video-Setup
148+
149+
```php
150+
<?php
151+
use FriendsOfRedaxo\VidstackPlayer\VidstackPlayer;
152+
153+
$player = (new VidstackPlayer('movie.mp4'))
154+
->title('Mein Film')
155+
->lang('de')
156+
->poster('poster.jpg', 'Film-Poster')
157+
->aspectRatio('16/9')
158+
->thumbnails('thumbs.vtt')
159+
->track('subtitles_de.vtt', 'Deutsch', 'de', 'subtitles', true)
160+
->track('subtitles_en.vtt', 'English', 'en', 'subtitles')
161+
->multipleSources([
162+
['src' => 'movie-1080p.mp4', 'width' => 1920, 'height' => 1080, 'type' => 'video/mp4'],
163+
['src' => 'movie-720p.mp4', 'width' => 1280, 'height' => 720, 'type' => 'video/mp4']
164+
])
165+
->attributes([
166+
'controls' => true,
167+
'playsinline' => true,
168+
'preload' => 'metadata'
169+
]);
170+
171+
echo $player->render();
172+
```
173+
174+
### Podcast mit Kapiteln
175+
176+
```php
177+
$podcast = (new VidstackPlayer('episode-01.mp3'))
178+
->title('Episode 1: Der Einstieg')
179+
->lang('de')
180+
->poster('cover.jpg', 'Podcast-Cover')
181+
->track('chapters.vtt', 'Kapitel', 'de', 'chapters', true)
182+
->attributes(['controls' => true]);
183+
184+
echo $podcast->render();
185+
```
186+
187+
## Utility-Klassen
188+
189+
### Plattform-Erkennung
190+
191+
```php
192+
<?php
193+
use FriendsOfRedaxo\VidstackPlayer\PlatformDetector;
194+
195+
// Plattform erkennen
196+
$info = PlatformDetector::detect('https://youtube.com/watch?v=abc');
197+
// Gibt zurück: ['platform' => 'youtube', 'id' => 'abc']
198+
199+
// Prüfen ob Audio
200+
$isAudio = PlatformDetector::isAudio('podcast.mp3'); // true
201+
202+
// Prüfen ob gültiges Medium
203+
$isMedia = PlatformDetector::isMedia('video.mp4'); // true
204+
```
205+
206+
### Utilities
207+
208+
```php
209+
<?php
210+
use FriendsOfRedaxo\VidstackPlayer\Utilities;
211+
212+
// HTML-Attribute erstellen
213+
$attrs = Utilities::buildHtmlAttributes([
214+
'controls' => true,
215+
'muted' => true,
216+
'data-id' => '123'
217+
]);
218+
// Gibt zurück: ' controls muted data-id="123"'
219+
220+
// MIME-Type erkennen
221+
$mime = Utilities::detectMimeType('video.webm'); // 'video/webm'
222+
```
223+
224+
## Backend-Features
225+
226+
### Mediapool-Integration
227+
228+
Das AddOn integriert sich automatisch in den REDAXO-Mediapool:
229+
230+
- **Vorschau-Player** - Video/Audio-Vorschau in der Medien-Detail-Sidebar
231+
- **Video-Info** - Auflösung, Codec, Dauer, Dateigröße, Bitrate (benötigt FFmpeg-AddOn)
232+
- **Schnell-Tools** - Trimmen, Optimieren und Analysieren von Videos (benötigt FFmpeg-AddOn)
233+
234+
### FFmpeg-Integration
235+
236+
Installiere das [FFmpeg AddOn](https://github.com/FriendsOfREDAXO/ffmpeg) für erweiterte Features:
237+
238+
```bash
239+
composer require friendsofredaxo/ffmpeg
240+
```
241+
242+
Features mit FFmpeg:
243+
- Video-Informationsanzeige
244+
- Schnell-Trimm-Tool
245+
- Optimierungs-Tool
246+
- Detaillierte Video-Analyse
247+
248+
### CKE5-Integration
249+
250+
oEmbed-Tags aus CKEditor 5 werden automatisch zu Vidstack-Playern konvertiert:
251+
252+
```html
253+
<!-- CKE5 fügt ein: -->
254+
<oembed url="https://youtube.com/watch?v=abc"></oembed>
255+
256+
<!-- Wird automatisch zu: -->
257+
<media-player src="..." title="...">...</media-player>
258+
```
259+
260+
## Architektur
261+
262+
Das AddOn ist in fokussierte, zweckgebundene Klassen strukturiert:
263+
264+
```
265+
lib/
266+
├── VidstackPlayer.php # Haupt-Player-Klasse (Fluent API)
267+
├── PlatformDetector.php # Plattform- & Medientyp-Erkennung
268+
├── AssetHelper.php # CSS/JS-Laden mit Cache-Busting
269+
├── Utilities.php # HTML-Attribute, MIME-Types
270+
├── Translator.php # i18n-Übersetzungs-Helper
271+
├── OembedParser.php # CKE5 oEmbed-Integration
272+
└── BackendIntegration.php # Mediapool-Sidebar & FFmpeg
273+
```
274+
275+
**Kernprinzipien:**
276+
- ✅ Single Responsibility - Jede Klasse hat einen klaren Zweck
277+
- ✅ Keine "God Classes" - Getrennte Zuständigkeiten
278+
- ✅ Universelle Benennung - Nicht nur "Video", sondern "VidstackPlayer" (unterstützt auch Audio!)
279+
280+
## Consent Management
281+
282+
**Wichtig:** Dieses AddOn enthält KEIN Consent-Management für YouTube/Vimeo.
283+
284+
Für DSGVO-konforme Embeds installiere den [Consent Manager](https://github.com/FriendsOfREDAXO/consent_manager):
285+
286+
```bash
287+
composer require friendsofredaxo/consent_manager
288+
```
289+
290+
Der Consent Manager übernimmt automatisch die Einwilligung für YouTube- und Vimeo-Embeds.
291+
292+
## Browser-Unterstützung
293+
294+
- Chrome 90+
295+
- Firefox 88+
296+
- Safari 14+
297+
- Edge 90+
298+
299+
Für ältere Browser degradiert Vidstack elegant zu nativen Video/Audio-Elementen.
300+
301+
## Migration von Vidstack 1.x
302+
303+
Siehe [MIGRATION.md](MIGRATION.md) für detaillierte Migrations-Anweisungen.
304+
305+
**Breaking Changes:**
306+
- Package-Name: `vidstack` → `vidstack`
307+
- Namespace: `FriendsOfRedaxo\VidStack\Video` → `FriendsOfRedaxo\VidstackPlayer\VidstackPlayer`
308+
- Klassen-Name: `Video` → `VidstackPlayer` (reflektiert Audio-Unterstützung)
309+
- API: Setter-Methoden → Fluent Method Chaining
310+
- Assets: Nutze `AssetHelper::getCss()` und `getJs()` statt manueller Einbindung
311+
312+
## Entwicklung
313+
314+
Dieses AddOn nutzt die [Standard GitHub Workflows für REDAXO AddOns](https://github.com/FriendsOfREDAXO/github-workflows).
315+
316+
### Setup
317+
318+
```bash
319+
# Das AddOn muss im REDAXO-Kontext entwickelt werden
320+
# Klone REDAXO und installiere das AddOn dort
321+
322+
# Node-Dependencies installieren
323+
cd redaxo/src/addons/vidstack/build
324+
npm install
325+
```
326+
327+
### Lokale Quality Checks
328+
329+
**PHP** (im Docker Container oder REDAXO-Root):
330+
```bash
331+
# Im REDAXO Docker Container (empfohlen)
332+
docker exec coreweb bash -c "cd /var/www/html/public && \
333+
vendor/bin/php-cs-fixer fix redaxo/src/addons/vidstack --config=redaxo/src/addons/vidstack/.php-cs-fixer.dist.php"
334+
335+
docker exec coreweb bash -c "cd /var/www/html/public && \
336+
php redaxo/src/addons/vidstack/.tools/rexstan.php && \
337+
redaxo/bin/console rexstan:analyze"
338+
```
339+
340+
**JavaScript:**
341+
```bash
342+
cd build
343+
npm run build # Assets bauen
344+
npx eslint config/*.js # JavaScript linten
345+
npx eslint config/*.js --fix # JavaScript auto-fixen
346+
```
347+
348+
### GitHub Actions
349+
350+
Automatisch bei jedem Push/PR:
351+
352+
1. **Code Style** - PHP-CS-Fixer formatiert Code automatisch
353+
2. **Rexstan** - PHPStan für REDAXO (Level 9)
354+
3. **Build Assets** - ESLint + npm build
355+
4. **Publish to REDAXO** - Bei GitHub Release
356+
357+
[Mehr Infos zu den Workflows](https://github.com/FriendsOfREDAXO/github-workflows)
358+
359+
## Lizenz
360+
361+
MIT License - Siehe [LICENSE](LICENSE)-Datei
362+
363+
## Credits
364+
365+
- Entwickelt mit [Vidstack](https://vidstack.io)
366+
- Maintained by [Friends Of REDAXO](https://github.com/FriendsOfREDAXO)
367+
- Für REDAXO CMS
368+
369+
## Support
370+
371+
- **Issues:** [GitHub Issues](https://github.com/FriendsOfREDAXO/vidstack/issues)
372+
- **REDAXO Slack:** #addons Channel
373+
- **Forum:** [REDAXO Forum](https://www.redaxo.org/forum/)

0 commit comments

Comments
 (0)