Vidstack.io for REDAXO

Was ist das hier?

Eine PHP-Klasse, die Videos auf Websites einbindet - mit Style! YouTube, Vimeo oder eigene Videos? Alles kein Problem. Und das Beste? Es ist so einfach zu benutzen, dass selbst ein Kater es könnte (wenn er Daumen hätte).

🚀 Los geht's!

Installation

Klar, natürlich über den REDAXO-Installer oder als GitHub Release. Aber das war's noch nicht ganz:

Für das Frontend:

Jetzt kommt der interessante Teil - wir müssen noch ein paar Dateien in unser Frontend einbinden, damit der ganze Zauber funktioniert. Hier ist, was du brauchst:

// In deinem Template oder an einer anderen passenden Stelle:

// CSS einbinden
echo '<link rel="stylesheet" href="' . rex_url::addonAssets('vidstack', 'vidstack.css') . '">';
echo '<link rel="stylesheet" href="' . rex_url::addonAssets('vidstack', 'vidstack_helper.css') . '">';

// JavaScript einbinden
echo '<script src="' . rex_url::addonAssets('vidstack', 'vidstack.js') . '"></script>';
echo '<script src="' . rex_url::addonAssets('vidstack', 'vidstack_helper.js') . '"></script>';

Was passiert hier? Wir benutzen rex_url::addonAssets(), um die richtigen URLs für unsere Assets zu generieren. Das ist wie ein Zauberstab, der immer auf die korrekten Dateien in deinem REDAXO-Setup zeigt, egal wo sie sich versteckt haben.

Die vidstack.css und vidstack.js sind die Hauptdarsteller - sie bringen den Video-Player zum Laufen. Die *_helper-Dateien sind wie die fleißigen Backstage-Helfer. Sie kümmern sich um Extras wie die DSGVO-Abfrage, technische Workarounds und andere nützliche Funktionen.

Hinweis zu YouTube/Vimeo & referrerpolicy

Wichtig: Für YouTube- und Vimeo-Embeds wird automatisch das Attribut referrerpolicy="strict-origin-when-cross-origin" gesetzt, wenn die vidstack_helper.js eingebunden ist. Dies ist notwendig, um Einbindungsfehler (z. B. YouTube Error 153) und Datenschutzprobleme zu vermeiden.

Du nutzt die Helper nicht?

Wenn du die Helper-JS nicht einbindest, musst du das Attribut selbst setzen! Beispiel für Vanilla-JS:

document.addEventListener('provider-change', function(e) {
    const provider = e.detail;
    if (provider && (provider.type === 'youtube' || provider.type === 'vimeo')) {
        provider.referrerPolicy = 'strict-origin-when-cross-origin';
        if (provider.iframe) {
            provider.iframe.referrerPolicy = 'strict-origin-when-cross-origin';
        }
    }
}, true);

Oder in React:

const handleProviderChange = (e) => {
    const provider = e.detail;
    if (provider && (provider.type === 'youtube' || provider.type === 'vimeo')) {
        provider.referrerPolicy = 'strict-origin-when-cross-origin';
        if (provider.iframe) {
            provider.iframe.referrerPolicy = 'strict-origin-when-cross-origin';
        }
    }
};
<MediaPlayer onProviderChange={handleProviderChange} ... />

Empfehlung: Für maximale Kompatibilität und weniger Wartungsaufwand immer die Helper-Dateien nutzen!

Übrigens: Wenn du nur die generate()-Methode verwendest und auf den ganzen Schnickschnack wie Consent-Abfragen verzichten möchtest, kannst du die Helper-Dateien weglassen. Aber für das volle Programm mit generateFull() braucht man alle vier Dateien.

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

Source Sizes für Desktop/Mobile Videos

Mit dem Vidstack-Addon können Sie verschiedene Video-Auflösungen für Desktop und Mobile bereitstellen:

<?php
use FriendsOfRedaxo\VidStack\Video;

// Einfache Desktop/Mobile Setup mit Standard-Auflösungen
$video = new Video('video-desktop.mp4', 'Responsives Video');
$video->setResponsiveSources('video-1080p.mp4', 'video-480p.mp4');
echo $video->generateFull();

// Mit benutzerdefinierten Auflösungen
$video = new Video('video-desktop.mp4', 'Custom Responsive Video');
$video->setResponsiveSources(
    'video-high.mp4', 
    'video-low.mp4',
    [2560, 1440], // Desktop: 2K
    [960, 540]    // Mobile: Mobile HD
);
echo $video->generateFull();

// Mit Auflösungspresets
$video = new Video('video.mp4', 'Preset Video');
$video->setResponsiveSourcesWithPresets('video-2k.mp4', 'video-mobile.mp4', '2k', 'mobile_hd');
echo $video->generateFull();

// Automatische Erstellung aus Dateinamen-Pattern
$video = new Video('produktvideo.mp4', 'Produktvideo');
if ($video->createAutoSources('produktvideo')) {
    // Sucht automatisch nach: produktvideo-1080p.mp4, produktvideo-720p.mp4, produktvideo-480p.mp4
    echo $video->generateFull();
}

// Mehrere Qualitätsstufen mit manueller Kontrolle
$video = new Video('video.mp4', 'Multi-Quality Video');
$video->setSources([
    ['src' => 'video-4k.mp4', 'width' => 3840, 'height' => 2160, 'type' => 'video/mp4'],
    ['src' => 'video-1080p.mp4', 'width' => 1920, 'height' => 1080, 'type' => 'video/mp4'],
    ['src' => 'video-720p.mp4', 'width' => 1280, 'height' => 720, 'type' => 'video/mp4'],
    ['src' => 'video-480p.mp4', 'width' => 854, 'height' => 480, 'type' => 'video/mp4']
]);
echo $video->generateFull();

Verfügbare Auflösungspresets:

• 4k (3840×2160), 2k (2560×1440), 1080p (1920×1080)
• 720p (1280×720), 480p (854×480), 360p (640×360)
• mobile_hd (960×540), mobile_sd (640×360), tablet (1024×576)

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.

Grundlegende Verwendung

<?php
use FriendsOfRedaxo\VidStack\Video;

// YouTube-Video
$video = new Video('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'Never Gonna Give You Up');
echo $video->generateFull();

// Vimeo-Video
$vimeoVideo = new Video('https://vimeo.com/148751763', 'Vimeo-Beispiel');
echo $vimeoVideo->generateFull();

// Lokales Video
$localVideo = new Video('video.mp4', 'Eigenes Video');
echo $localVideo->generate();

// Externes Video
$externalVideo = new Video('https://somedomain.tld/video.mp4', 'Eigenes Video');
echo $externalVideo->generate();

Grundlegende Beispiele für den Alltag

Video mit Poster-Bild und Titel

<?php
use FriendsOfRedaxo\VidStack\Video;

// Video aus dem Medienpool mit Poster-Bild
$video = new Video('mein_video.mp4', 'Mein tolles Video mit Vorschaubild');
$video->setPoster('vorschaubild.jpg', 'Beschreibung des Vorschaubilds');
echo $video->generate();

Video mit Untertiteln (VTT-Format)

<?php
use FriendsOfRedaxo\VidStack\Video;

// Video mit mehrsprachigen Untertiteln
$video = new Video('erklaervideo.mp4', 'Erklärvideo mit Untertiteln');
$video->addSubtitle('untertitel_de.vtt', 'captions', 'Deutsch', 'de', true); // Standard-Untertitel
$video->addSubtitle('untertitel_en.vtt', 'captions', 'Englisch', 'en');
echo $video->generate();

Barrierefreies Video mit Beschreibungen

<?php
use FriendsOfRedaxo\VidStack\Video;

// Barrierefreies Video mit zusätzlichen Informationen
$video = new Video('tutorial.mp4', 'Tutorial: REDAXO Installation');

// Ausführliche Beschreibung für Screenreader hinzufügen
$video->setA11yContent(
    'Das Video zeigt Schritt für Schritt, wie REDAXO installiert wird. Beginnend mit dem Download bis zur ersten Anmeldung im Backend.',
    'https://beispiel.de/redaxo-installation-text.html' // Alternative Text-Version
);

// Kapitelmarken hinzufügen
$video->addSubtitle('chapters.vtt', 'chapters', 'Kapitel', 'de');

echo $video->generateFull();

YouTube mit DSGVO-konformer Zwei-Klick-Lösung

<?php
use FriendsOfRedaxo\VidStack\Video;

// YouTube-Video mit Datenschutzhinweis
$video = new Video('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'DSGVO-konformes YouTube-Video');

// WICHTIG: Für die Consent-Funktionalität müssen die helper-Dateien im Frontend eingebunden sein!
// Siehe Installation -> Für das Frontend

// generateFull() erzeugt automatisch den DSGVO-konformen Platzhalter für YouTube und Vimeo
echo $video->generateFull();

Video mit Vorschaubildern für die Zeitleiste (VTT-Format)

<?php
use FriendsOfRedaxo\VidStack\Video;

// Video mit Thumbnail-Vorschau beim Hover über die Zeitleiste
$video = new Video('produktvideo.mp4', 'Produktvideo mit Thumbnail-Vorschau');

// VTT-Datei mit Zeitstempeln und Bildpfaden
$video->setThumbnails('thumbnails.vtt'); 

// Beispiel für eine thumbnails.vtt Datei:
// WEBVTT
//
// 00:00:00.000 --> 00:00:05.000
// thumbnails/img1.jpg
// 
// 00:00:05.000 --> 00:00:10.000
// thumbnails/img2.jpg

echo $video->generate();

Audio-Player

<?php
use FriendsOfRedaxo\VidStack\Video;

// Audio-Datei einbinden
$audio = new Video('podcast.mp3', 'Podcast Episode #42');

// Audioplayer bekommt automatisch das richtige Layout
echo $audio->generate();

� FFmpeg-Integration (Backend-Funktionalität)

Wenn das FFmpeg-AddOn installiert und aktiv ist, zeigt Vidstack automatisch detaillierte Video-Informationen im Medienpool an.

Was wird angezeigt?

Im Medienpool wird unter jedem Video automatisch eine kompakte Informationsbox eingeblendet mit:

• Auflösung: Breite × Höhe in Pixeln (z.B. 1920 × 1080 px) und Seitenverhältnis (z.B. 16:9)
• Video-Codec: Komprimierungsformat (z.B. H264, VP9, AV1)
• Dauer: Formatierte Videolänge (z.B. 05:42 oder 01:23:45)
• Dateigröße: Größe der Videodatei (z.B. 45.2 MB)
• Bitrate: Datenrate des Videos (z.B. 2.4 Mbps) - nur bei aussagekräftigen Werten

Voraussetzungen

# FFmpeg muss auf dem Server installiert sein
ffmpeg -version

# FFmpeg-AddOn in REDAXO installieren und aktivieren

Funktionsweise

Die Integration erfolgt vollautomatisch:

1. Automatische Erkennung: Vidstack prüft beim Laden einer Video-Datei im Medienpool, ob das FFmpeg-AddOn verfügbar