Skip to content

Commit 646f2c0

Browse files
skerbisskerbis
authored
Merge pull request #39 from FriendsOfREDAXO/feature/source-sizes-desktop-mobile
feat: Add source sizes support for desktop/mobile video qualities
2 parents 9859b73 + 0f462dd commit 646f2c0

4 files changed

Lines changed: 903 additions & 1 deletion

File tree

‎PR_DESCRIPTION.md‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
# Add Source Sizes Support for Desktop/Mobile Video Qualities
2+
3+
## 🎯 Beschreibung
4+
5+
Diese PR implementiert **Source Sizes** Support für das Vidstack REDAXO-Addon, wie in der [Vidstack-Dokumentation](https://vidstack.io/docs/player/core-concepts/loading/#source-sizes) beschrieben. Dies ermöglicht es, verschiedene Video-Auflösungen für Desktop und Mobile bereitzustellen.
6+
7+
## ✨ Neue Features
8+
9+
### Neue Methoden in der Video-Klasse:
10+
11+
- **`setSources(array $sources, bool $autoSort = true)`** - Für mehrere Video-Qualitäten mit Sortierungskontrolle
12+
- **`setResponsiveSources(string $desktop, string $mobile, array $desktopRes = [1920, 1080], array $mobileRes = [854, 480])`** - Flexible Desktop/Mobile Setup
13+
- **`setResponsiveSourcesWithPresets(string $desktop, string $mobile, string $desktopPreset = '1080p', string $mobilePreset = '480p')`** - Mit vordefinierte Auflösungspresets
14+
- **`createAutoSources(string $baseFilename, array $qualityLevels = null, string $extension = 'mp4')`** - Automatische Source-Erstellung aus Dateinamen-Pattern
15+
- **`getResolutionPresets()`** - Statische Methode für vordefinierte Auflösungen
16+
- **`generateSourceElements()`** - Optimierte Source-Generierung mit Caching
17+
- **`getMediaType(string $source)`** - Verbesserte Media-Type-Erkennung
18+
19+
### Erweiterte Funktionalität:
20+
21+
- **Flexible Auflösungen** - Benutzerdefinierte Auflösungen als Parameter
22+
- **Auflösungspresets** - Vordefinierte Standards (4K, 2K, 1080p, 720p, 480p, mobile_hd, etc.)
23+
- **Performance-Optimierung** - Sortierung wird gecacht, optional deaktivierbar
24+
- **Auto-Source-Erstellung** - Automatisches Finden von Qualitätsvarianten basierend auf Dateinamen
25+
- **Intelligente Type-Detection** - Erweiterte Media-Type-Erkennung
26+
- Automatische Sortierung der Quellen nach Qualität (höchste zuerst)
27+
- Support für `width`/`height` Attribute auf `<source>`-Elementen
28+
- Vollständig **rückwärtskompatibel** mit bestehender Implementierung
29+
- Intelligente Fallback-Mechanismen
30+
31+
## 🚀 Verwendung
32+
33+
### Einfache Desktop/Mobile Implementierung:
34+
```php
35+
// Standard-Auflösungen (1920x1080 / 854x480)
36+
$video = new Video('video-desktop.mp4', 'Responsives Video');
37+
$video->setResponsiveSources('video-1080p.mp4', 'video-480p.mp4');
38+
echo $video->generateFull();
39+
40+
// Benutzerdefinierte Auflösungen
41+
$video = new Video('video.mp4', 'Custom Video');
42+
$video->setResponsiveSources(
43+
'video-2k.mp4', 'video-mobile.mp4',
44+
[2560, 1440], // Desktop: 2K
45+
[960, 540] // Mobile: HD
46+
);
47+
echo $video->generateFull();
48+
49+
// Mit Auflösungspresets
50+
$video = new Video('video.mp4', 'Preset Video');
51+
$video->setResponsiveSourcesWithPresets('video-high.mp4', 'video-low.mp4', '2k', 'mobile_hd');
52+
echo $video->generateFull();
53+
```
54+
55+
### Automatische Source-Erstellung:
56+
```php
57+
$video = new Video('produktvideo.mp4', 'Produktvideo');
58+
// Sucht automatisch nach: produktvideo-1080p.mp4, produktvideo-720p.mp4, produktvideo-480p.mp4
59+
if ($video->createAutoSources('produktvideo')) {
60+
echo $video->generateFull();
61+
}
62+
```
63+
64+
### Mehrere Qualitätsstufen:
65+
```php
66+
$video = new Video('video.mp4', 'Multi-Quality Video');
67+
$video->setSources([
68+
['src' => 'video-1080p.mp4', 'width' => 1920, 'height' => 1080, 'type' => 'video/mp4'],
69+
['src' => 'video-720p.mp4', 'width' => 1280, 'height' => 720, 'type' => 'video/mp4'],
70+
['src' => 'video-480p.mp4', 'width' => 854, 'height' => 480, 'type' => 'video/mp4']
71+
]);
72+
echo $video->generateFull();
73+
```
74+
75+
### Integration in REDAXO-Module:
76+
```php
77+
// REX_MEDIA[1] = Desktop Video, REX_MEDIA[2] = Mobile Video
78+
$video = new Video('REX_MEDIA[1]', 'REX_VALUE[1]');
79+
if ('REX_MEDIA[2]') {
80+
$video->setResponsiveSources('REX_MEDIA[1]', 'REX_MEDIA[2]');
81+
}
82+
echo $video->generateFull();
83+
```
84+
85+
### Performance-Optimierung:
86+
```php
87+
// Bereits sortierte Sources - ohne automatisches Sorting
88+
$video = new Video('video.mp4', 'Performance Video');
89+
$video->setSources($sortedSources, false); // autoSort = false
90+
echo $video->generateFull();
91+
```
92+
93+
### Verfügbare Auflösungspresets:
94+
- **Ultra HD**: `4k` (3840×2160), `2k` (2560×1440)
95+
- **Standard**: `1080p` (1920×1080), `720p` (1280×720), `480p` (854×480), `360p` (640×360)
96+
- **Mobile**: `mobile_hd` (960×540), `mobile_sd` (640×360), `tablet` (1024×576)
97+
98+
## 🔧 Technische Details
99+
100+
### Generiertes HTML:
101+
```html
102+
<media-player>
103+
<media-provider>
104+
<source src="video-1080p.mp4" type="video/mp4" width="1920" height="1080" />
105+
<source src="video-720p.mp4" type="video/mp4" width="1280" height="720" />
106+
<source src="video-480p.mp4" type="video/mp4" width="854" height="480" />
107+
</media-provider>
108+
<media-video-layout></media-video-layout>
109+
</media-player>
110+
```
111+
112+
### Browser-Verhalten:
113+
- Browser wählt automatisch die beste verfügbare Quelle
114+
- Basierend auf Gerätegröße, Netzwerkbedingungen und verfügbarer Bandbreite
115+
- Folgt den Web Standards für adaptive Media-Auswahl
116+
117+
## 📁 Geänderte/Neue Dateien
118+
119+
- **`lib/video.php`** - Erweiterte Video-Klasse mit Source Sizes Support
120+
- **`README.md`** - Dokumentation und Beispiele hinzugefügt
121+
- **`examples/source-sizes-examples.php`** - Umfassende Implementierungsbeispiele
122+
123+
## ✅ Kompatibilität
124+
125+
- ✅ **Vollständig rückwärtskompatibel** - bestehender Code funktioniert unverändert
126+
- ✅ **Keine Breaking Changes** - alle bestehenden Methoden bleiben unverändert
127+
- ✅ **Graceful Fallback** - bei fehlenden Quellen wird automatisch Single Source verwendet
128+
- ✅ **REDAXO 5.17.1+** - wie gewohnt
129+
130+
## 🧪 Tests
131+
132+
- [x] Single Source (bestehende Funktionalität) - funktioniert
133+
- [x] Desktop/Mobile Sources - funktioniert
134+
- [x] Multiple Quality Sources - funktioniert
135+
- [x] YouTube/Vimeo (externe Quellen) - funktioniert unverändert
136+
- [x] Audio-Dateien - funktionieren unverändert
137+
- [x] Rückwärtskompatibilität - alle bestehenden Implementierungen funktionieren
138+
139+
## 📋 Checklist
140+
141+
- [x] Code implementiert und getestet
142+
- [x] Dokumentation in README.md erweitert
143+
- [x] Beispiele erstellt (`examples/source-sizes-examples.php`)
144+
- [x] Rückwärtskompatibilität sichergestellt
145+
- [x] Commit-Message nach Conventional Commits
146+
- [x] Keine Breaking Changes
147+
148+
## 🎬 Warum diese Implementierung?
149+
150+
Diese Implementierung folgt den **Vidstack-Empfehlungen** für Source Sizes und ermöglicht es Entwicklern:
151+
152+
1. **Performance-Optimierung** - Kleinere Dateien für Mobile, größere für Desktop
153+
2. **Bandbreiten-Effizienz** - Browser wählt automatisch die optimale Qualität
154+
3. **Benutzerfreundlichkeit** - Nahtlose Wiedergabe ohne Bandbreiten-Probleme
155+
4. **Zukunftssicherheit** - Standard-konforme Implementierung
156+
157+
## 🔗 Referenzen
158+
159+
- [Vidstack Source Sizes Dokumentation](https://vidstack.io/docs/player/core-concepts/loading/#source-sizes)
160+
- [HTML Video Element - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
161+
- [Media Source Selection - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source)
162+
163+
---
164+
165+
Ready to merge! 🚀

‎README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,59 @@ Die `vidstack.css` und `vidstack.js` sind die Hauptdarsteller - sie bringen den
3636

3737
So, jetzt aber! Dein REDAXO ist jetzt bereit, Videos mit Style zu servieren. 🎬🍿
3838

39+
### Source Sizes für Desktop/Mobile Videos
40+
41+
Mit dem Vidstack-Addon können Sie verschiedene Video-Auflösungen für Desktop und Mobile bereitstellen:
42+
43+
```php
44+
<?php
45+
use FriendsOfRedaxo\VidStack\Video;
46+
47+
// Einfache Desktop/Mobile Setup mit Standard-Auflösungen
48+
$video = new Video('video-desktop.mp4', 'Responsives Video');
49+
$video->setResponsiveSources('video-1080p.mp4', 'video-480p.mp4');
50+
echo $video->generateFull();
51+
52+
// Mit benutzerdefinierten Auflösungen
53+
$video = new Video('video-desktop.mp4', 'Custom Responsive Video');
54+
$video->setResponsiveSources(
55+
'video-high.mp4',
56+
'video-low.mp4',
57+
[2560, 1440], // Desktop: 2K
58+
[960, 540] // Mobile: Mobile HD
59+
);
60+
echo $video->generateFull();
61+
62+
// Mit Auflösungspresets
63+
$video = new Video('video.mp4', 'Preset Video');
64+
$video->setResponsiveSourcesWithPresets('video-2k.mp4', 'video-mobile.mp4', '2k', 'mobile_hd');
65+
echo $video->generateFull();
66+
67+
// Automatische Erstellung aus Dateinamen-Pattern
68+
$video = new Video('produktvideo.mp4', 'Produktvideo');
69+
if ($video->createAutoSources('produktvideo')) {
70+
// Sucht automatisch nach: produktvideo-1080p.mp4, produktvideo-720p.mp4, produktvideo-480p.mp4
71+
echo $video->generateFull();
72+
}
73+
74+
// Mehrere Qualitätsstufen mit manueller Kontrolle
75+
$video = new Video('video.mp4', 'Multi-Quality Video');
76+
$video->setSources([
77+
['src' => 'video-4k.mp4', 'width' => 3840, 'height' => 2160, 'type' => 'video/mp4'],
78+
['src' => 'video-1080p.mp4', 'width' => 1920, 'height' => 1080, 'type' => 'video/mp4'],
79+
['src' => 'video-720p.mp4', 'width' => 1280, 'height' => 720, 'type' => 'video/mp4'],
80+
['src' => 'video-480p.mp4', 'width' => 854, 'height' => 480, 'type' => 'video/mp4']
81+
]);
82+
echo $video->generateFull();
83+
```
84+
85+
**Verfügbare Auflösungspresets:**
86+
- `4k` (3840×2160), `2k` (2560×1440), `1080p` (1920×1080)
87+
- `720p` (1280×720), `480p` (854×480), `360p` (640×360)
88+
- `mobile_hd` (960×540), `mobile_sd` (640×360), `tablet` (1024×576)
89+
90+
**Wie es funktioniert:** Der Browser wählt automatisch die beste verfügbare Quelle basierend auf Gerätegröße und Netzwerkbedingungen. Die Quellen werden nach Qualität sortiert ausgegeben (höchste zuerst). Das Sorting wird gecacht für bessere Performance.
91+
3992
### Grundlegende Verwendung
4093

4194
```php

0 commit comments

Comments
 (0)