Skip to content
BranchesTags

Repository files navigation

Vidstack.io for REDAXO

Screenshot

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 einbindenecho'<link rel="stylesheet" href="' . rex_url::addonAssets('vidstack', 'vidstack.css') . '">';
echo'<link rel="stylesheet" href="' . rex_url::addonAssets('vidstack', 'vidstack_helper.css') . '">';
// JavaScript einbindenecho'<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){constprovider=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:

consthandleProviderChange=(e)=>{constprovider=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';}}};<MediaPlayeronProviderChange={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:

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Einfache Desktop/Mobile Setup mit Standard-Auflösungen$video = newVideo('video-desktop.mp4', 'Responsives Video');
$video->setResponsiveSources('video-1080p.mp4', 'video-480p.mp4');
echo$video->generateFull();
// Mit benutzerdefinierten Auflösungen$video = newVideo('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 = newVideo('video.mp4', 'Preset Video');
$video->setResponsiveSourcesWithPresets('video-2k.mp4', 'video-mobile.mp4', '2k', 'mobile_hd');
echo$video->generateFull();
// Automatische Erstellung aus Dateinamen-Pattern$video = newVideo('produktvideo.mp4', 'Produktvideo');
if ($video->createAutoSources('produktvideo')) {
// Sucht automatisch nach: produktvideo-1080p.mp4, produktvideo-720p.mp4, produktvideo-480p.mp4echo$video->generateFull();
}
// Mehrere Qualitätsstufen mit manueller Kontrolle$video = newVideo('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

<?phpuseFriendsOfRedaxo\VidStack\Video;
// YouTube-Video$video = newVideo('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'Never Gonna Give You Up');
echo$video->generateFull();
// Vimeo-Video$vimeoVideo = newVideo('https://vimeo.com/148751763', 'Vimeo-Beispiel');
echo$vimeoVideo->generateFull();
// Lokales Video$localVideo = newVideo('video.mp4', 'Eigenes Video');
echo$localVideo->generate();
// Externes Video$externalVideo = newVideo('https://somedomain.tld/video.mp4', 'Eigenes Video');
echo$externalVideo->generate();

Grundlegende Beispiele für den Alltag

Video mit Poster-Bild und Titel

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

Video mit Untertiteln (VTT-Format)

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Video mit mehrsprachigen Untertiteln$video = newVideo('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

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Barrierefreies Video mit zusätzlichen Informationen$video = newVideo('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

<?phpuseFriendsOfRedaxo\VidStack\Video;
// YouTube-Video mit Datenschutzhinweis$video = newVideo('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 Vimeoecho$video->generateFull();

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

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Video mit Thumbnail-Vorschau beim Hover über die Zeitleiste$video = newVideo('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.jpgecho$video->generate();

Audio-Player

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Audio-Datei einbinden$audio = newVideo('podcast.mp3', 'Podcast Episode #42');
// Audioplayer bekommt automatisch das richtige Layoutecho$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 ist
  2. Video-Analyse: Falls verfügbar, werden die Video-Metadaten über die FFmpeg VideoInfo-Klasse ausgelesen
  3. Anzeige: Die Informationen werden kompakt unter dem Video-Player dargestellt
  4. Action-Buttons: Direkte Verlinkung zu FFmpeg-Tools für weitere Bearbeitung

Action-Buttons

Unter den Video-Informationen werden praktische Buttons angezeigt:

  • 🔧 Trimmen: Öffnet den FFmpeg-Trimmer zum Schneiden des Videos
  • 📦 Optimieren: Startet die Komprimierung für Web-optimierte Versionen
  • ℹ️ Details: Zeigt ausführliche technische Video-Informationen

Die Buttons führen direkt zu den entsprechenden FFmpeg-Tools und übertragen automatisch den Dateinamen.

Ohne FFmpeg-AddOn

Ohne das FFmpeg-AddOn funktioniert Vidstack weiterhin normal, zeigt aber keine technischen Video-Informationen an.

�🛠 Die Class

Konstruktor

__construct($source, $title = '', $lang = 'de'): void
  • $source: URL oder Pfad zum Video (Pflicht)
  • $title: Titel des Videos (Optional)
  • $lang: Sprachcode (Optional, Standard: 'de')

Methoden

  • setAttributes(array $attributes): void: Zusätzliche Player-Attribute
  • setA11yContent($description, $alternativeUrl = ''): void: Barrierefreiheits-Infos
  • setThumbnails($thumbnailsUrl): void: Thumbnail-Vorschaubilder (VTT-Format)
  • setPoster($posterSrc, $posterAlt): void: Poster-Bild für das Video setzen
  • addSubtitle($src, $kind, $label, $lang, $default = false): void: Untertitel hinzufügen
  • generateFull(): string: Vollständiger HTML-Code mit allen Schikanen
  • generate(): string: Einfacher Video-Player ohne Schnickschnack
  • isMedia($url): bool: Prüft, ob es sich um eine Mediendatei handelt
  • isAudio($url): bool: Prüft, ob es sich um eine Audiodatei handelt
  • videoOembedHelper(): void: Registriert einen Output-Filter für oEmbed-Tags
  • parseOembedTags(string $content): string: Parst oEmbed-Tags im Inhalt
  • show_sidebar(\rex_extension_point $ep): ?string: Generiert Medienvorschau für die Sidebar im Medienpool
  • getSourceUrl(): string: Gibt die URL der Videoquelle zurück
  • getAlternativeUrl(): string: Gibt eine alternative URL für das Video zurück
  • getVideoInfo($source): array: Gibt Informationen über das Video zurück (Plattform und ID) [Statische Methode]
  • generateAttributesString(): string: Generiert einen String mit allen gesetzten Attributen
  • generateConsentPlaceholder(string $consentText, string $platform, string $videoId): string: Generiert einen Platzhalter für die Consent-Abfrage

📋 Optionen und Pflichtangaben

Pflichtangaben

  • $source beim Erstellen des Video-Objekts

Optionale Angaben

  • $title beim Erstellen des Video-Objekts
  • $lang beim Erstellen des Video-Objekts
  • Alle Attribute in setAttributes()
  • Beschreibung und alternativer URL in setA11yContent()
  • Thumbnail-URL in setThumbnails()
  • Poster-Bild in setPoster()
  • Untertitel-Informationen in addSubtitle()

🌍 Sprachenwirrwarr

Der Video-Player spricht mehr Sprachen als ein UNO-Dolmetscher! Aktuell im Repertoire:

  • Deutsch (de)
  • Englisch (en)
  • Spanisch (es)
  • Slowenisch (si)
  • Französisch (fr)

Sprachänderung leicht gemacht:

$videoES = newVideo('https://www.youtube.com/watch?v=example', 'Mi Video', 'es');

🎭 Beispiele für die Dramaturgen

Ein YouTube-Video mit vollem Programm

$video = newVideo('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'Never Gonna Give You Up', 'en');
$video->setAttributes(['autoplay' => true, 'muted' => true]);
$video->setA11yContent('This is a music video by Rick Astley');
$video->setThumbnails('/pfad/zu/thumbnails.vtt');
$video->setPoster('/pfad/zu/poster.jpg', 'Rick Astley dancing');
$video->addSubtitle('/untertitel/deutsch.vtt', 'captions', 'Deutsch', 'de', true);
$video->addSubtitle('/untertitel/english.vtt', 'captions', 'English', 'en');
echo$video->generateFull();

Ein schlichtes lokales Video

$video = newVideo('/pfad/zu/katzen_spielen_schach.mp4', 'Schachgenies');
echo$video->generate();

Vimeo mit Custom Thumbnails und Untertiteln

$video = newVideo('https://vimeo.com/148751763', 'Vimeo-Meisterwerk', 'fr');
$video->setThumbnails('/vimeo_thumbs.vtt');
$video->setPoster('/vimeo_poster.jpg', 'Video thumbnail');
$video->addSubtitle('/sous-titres.vtt', 'captions', 'Français', 'fr', true);
echo$video->generateFull();

🌟 Full Featured Beispiel - Ein bisschen Hollywood ⭐️

Aufwendig und zu teuer Hier kommt der Königsklasse-Einsatz - alle Funktionen auf einmal:

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Initialisierung des Video-Objekts$video = newVideo('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'Ultimate Rickroll Experience', 'en');
// Setzen aller möglichen Player-Attribute$video->setAttributes([
'autoplay' => false,
'muted' => false,
'loop' => true,
'playsinline' => true,
'crossorigin' => 'anonymous',
'preload' => 'metadata',
'controlsList' => 'nodownload',
'class' => 'my-custom-video-class',
'data-custom' => 'some-value'
]);
// Hinzufügen von ausführlichen Barrierefreiheits-Inhalten$video->setA11yContent(
'This legendary music video features Rick Astley performing "Never Gonna Give You Up". The video begins with Rick, dressed in a black leather jacket, dancing in various locations. The catchy synth-pop tune and Rick\'s distinctive baritone voice have made this song an internet phenomenon.',
'https://example.com/detailed-audio-description'
);
// Setzen von Thumbnail-Vorschaubildern für den Player-Fortschritt$video->setThumbnails('/pfad/zu/detailed-thumbnails.vtt');
// Setzen des Poster-Bildes$video->setPoster('/pfad/zu/rickroll_poster.jpg', 'Rick Astley in his iconic pose');
// Hinzufügen von Untertiteln in mehreren Sprachen$video->addSubtitle('/untertitel/english.vtt', 'captions', 'English', 'en', true);
$video->addSubtitle('/untertitel/deutsch.vtt', 'captions', 'Deutsch', 'de');
$video->addSubtitle('/untertitel/francais.vtt', 'captions', 'Français', 'fr');
$video->addSubtitle('/untertitel/espanol.vtt', 'captions', 'Español', 'es');
$video->addSubtitle('/untertitel/slovenscina.vtt', 'captions', 'Slovenščina', 'si');
// Hinzufügen von Audiodeskription$video->addSubtitle('/audio/description.vtt', 'descriptions', 'Audio Description', 'en');
// Hinzufügen von Kapitelmarkierungen$video->addSubtitle('/chapters/rickroll.vtt', 'chapters', 'Chapters', 'en');
// Generieren des vollständigen Video-Player-Codes$fullPlayerCode = $video->generateFull();
// Ausgabe des generierten Codesecho$fullPlayerCode;

Dieses Beispiel zeigt die Hauptfunktionalität des Players mit allen verfügbaren Optionen. In den meisten Fällen wird das bereits alles sein, was Sie brauchen.

🛠️ Erweiterte Methoden für spezielle Anwendungsfälle

Die folgenden erweiterten Methoden sind für spezielle Anwendungsfälle gedacht, wenn Sie mehr Kontrolle über den Player benötigen oder eigene Implementierungen erstellen möchten.

Beispiel 1: Eigenen DSGVO-konformen Player mit zwei-Klick-Lösung erstellen

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Video-Objekt erstellen$video = newVideo('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'Datenschutzkonformes YouTube-Video');
// Plattform und Video-ID ermitteln$videoInfo = Video::getVideoInfo($video->getSourceUrl());
// Nur wenn es ein YouTube oder Vimeo Video ist, DSGVO-Abfrage anzeigenif ($videoInfo['platform'] !== 'default') {
// Angepassten Consent-Text erstellen$consentText = "Um dieses {$videoInfo['platform']}-Video anzusehen, klicken Sie bitte auf 'Video laden'. " .
"Dadurch werden Daten an {$videoInfo['platform']} übermittelt. " .
"Weitere Informationen finden Sie in unserer Datenschutzerklärung.";
// Container mit eigener Klasse für Styling erstellenecho'<div class="custom-video-consent">';
// Vorschaubild mit Platzhalter anzeigen (nutzt die Video-Klassen-Methode)echo$video->generateConsentPlaceholder($consentText, $videoInfo['platform'], $videoInfo['id']);
// Informationstext anzeigenecho'<div class="consent-info">';
echo'<p>Video-Quelle: ' . htmlspecialchars($video->getSourceUrl()) . '</p>';
echo'</div>';
echo'</div>';
} else {
// Bei lokalen Videos direkt anzeigenecho$video->generate();
}

Beispiel 2: Erweiterter Player mit Analytics-Integration

<?phpuseFriendsOfRedaxo\VidStack\Video;
functioncreateTrackedVideo($source, $title = '') {
// Video erstellen$video = newVideo($source, $title);
// Video-Informationen für Analytics-Tracking$videoInfo = Video::getVideoInfo($video->getSourceUrl());
$platform = $videoInfo['platform'];
$videoId = $videoInfo['id'];
// Standard HTML für den Player generieren$playerHtml = $video->generate();
// Attribute für das Analytics-Tracking hinzufügen$trackingAttributes = ' data-tracking="true" data-platform="' . htmlspecialchars($platform) . '" data-video-id="' . htmlspecialchars($videoId) . '"';
// HTML-Code mit Tracking-Attributen ergänzen$trackedHtml = str_replace('<media-player', '<media-player' . $trackingAttributes, $playerHtml);
// JavaScript für das Tracking hinzufügen$trackedHtml .= <<<EOT<script>document.addEventListener('DOMContentLoaded', function() { const player = document.querySelector('media-player[data-tracking="true"]'); if (player) { player.addEventListener('play', function() { // Hier Tracking-Code einfügen console.log('Video gestartet:', player.getAttribute('data-platform'), player.getAttribute('data-video-id')); }); player.addEventListener('ended', function() { // Video wurde vollständig angesehen console.log('Video beendet:', player.getAttribute('data-platform'), player.getAttribute('data-video-id')); }); }});</script>EOT;
return$trackedHtml;
}
// VerwendungechocreateTrackedVideo('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'Tracking-Demo');

Beispiel 3: Eigenes Player-Layout mit vorgenerierten Elementen erstellen

<?phpuseFriendsOfRedaxo\VidStack\Video;
functioncreateCustomLayoutVideo($source, $title, $showInfo = true) {
$video = newVideo($source, $title);
// Video-Info ermitteln$videoInfo = $video->getVideoInfo();
$isYouTube = $videoInfo['platform'] === 'youtube';
// Custom Container erstellen$output = '<div class="custom-video-player">';
// Titel und Info anzeigen, wenn gewünschtif ($showInfo) {
$output .= '<div class="video-header">';
$output .= '<h3>' . htmlspecialchars($title) . '</h3>';
if ($isYouTube) {
$output .= '<div class="platform-info">Quelle: YouTube</div>';
}
$output .= '</div>';
}
// Player-Container$output .= '<div class="video-container">';
// Für YouTube wird der Consent-Platzhalter verwendetif ($isYouTube) {
$consentText = "YouTube-Videos werden erst nach Zustimmung geladen, um Ihre Privatsphäre zu schützen.";
$output .= $video->generateConsentPlaceholder($consentText, 'youtube', $videoInfo['id']);
} else {
// Für lokale Videos normalen Player anzeigen$output .= $video->generate();
}
$output .= '</div>';
// Custom Controls oder zusätzliche Informationenif ($showInfo) {
$output .= '<div class="video-footer">';
$output .= '<div class="video-source">Video-URL: ' . htmlspecialchars($video->getSourceUrl()) . '</div>';
$output .= '</div>';
}
$output .= '</div>';
return$output;
}
// VerwendungechocreateCustomLayoutVideo('https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'Custom Layout Demo');

Beispiel 4: Adaptive Einbindung basierend auf Gerätetyp

<?phpuseFriendsOfRedaxo\VidStack\Video;
functioncreateResponsiveVideo($source, $title = '', $isMobile = false) {
$video = newVideo($source, $title);
// Auf mobilen Geräten andere Attribute setzenif ($isMobile) {
$video->setAttributes([
'playsinline' => true,
'preload' => 'none', // Bandbreite sparen'controlsList' => 'nodownload', 'disablePictureInPicture' => true,
'class' => 'mobile-optimized'
]);
// Einfache Version für mobile Gerätereturn$video->generate();
} else {
// Auf Desktop volle Funktionalität$video->setAttributes([
'class' => 'desktop-enhanced',
'preload' => 'metadata'
]);
// Poster und Untertitel für Desktop hinzufügen$video->setPoster('/pfad/zu/hq-poster.jpg', 'Video-Vorschau');
$video->addSubtitle('/untertitel/deutsch.vtt', 'captions', 'Deutsch', 'de', true);
return$video->generateFull();
}
}
// Einfache Geräteerkennung (in der Praxis würden Sie hier eine richtige Erkennung verwenden)$isMobile = strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false;
// VerwendungechocreateResponsiveVideo('https://example.com/video.mp4', 'Responsives Video', $isMobile);

Beispiel 5: Integration mit REX_MEDIA-Variablen

<?phpuseFriendsOfRedaxo\VidStack\Video;
// Angenommen, wir haben eine REX_MEDIA-Variable mit einem Video$mediaName = REX_MEDIA[1];
if ($mediaName) {
$video = newVideo($mediaName, 'Video aus dem Medienpool');
// Prüfen, ob es sich um eine Audiodatei handeltif (Video::isAudio($mediaName)) {
echo'<div class="audio-player-wrapper">';
echo'<h4>Audio-Player</h4>';
echo$video->generate();
echo'</div>';
} else {
// Video mit Standardeinstellungen anzeigen$video->setAttributes([
'controls' => true,
'playsinline' => true
]);
// Wenn ein Poster-Bild ausgewählt wurdeif (REX_MEDIA[2]) {
$video->setPoster(rex_url::media(REX_MEDIA[2]), 'Vorschaubild');
}
echo$video->generateFull();
}
}

Durch diese praktischen Beispiele wird deutlich, wie die erweiterten Methoden der Video-Klasse sinnvoll in verschiedenen Szenarien eingesetzt werden können, anstatt sie nur isoliert zu demonstrieren.

🧙‍♂️ Tipp: Die magische Default-Funktion

Wer faul clever ist, baut sich eine Hilfsfunktion für Standardeinstellungen:

functioncreateDefaultVideo($source, $title = '', $a11yContent = null) {
$current_lang = rex_clang::getCurrent();
$lang_code = $current_lang->getCode();
$video = newVideo($source, $title, $lang_code);
$video->setAttributes([
'autoplay' => false,
'muted' => true,
'playsinline' => true
]);
if ($a11yContent !== null) {
$video->setA11yContent($a11yContent);
}
$video->setPoster('/pfad/zu/default_poster.jpg', 'Default video poster');
return$video;
}
// Verwendung$easyVideo = createDefaultVideo('https://youtube.com/watch?v=abcdefg', 'Einfach Genial', 'Ein Video über etwas Interessantes');
echo$easyVideo->generateFull();

🎸 Unterstützung für Audio-Dateien

Das Addon unterstützt auch die Einbindung von Audio-Dateien. Genauso wie für Videos:

$audio = newVideo('audio.mp3', 'Mein Lieblingssong');
echo$audio->generate();

✔︎ Im Backend schon integriert

Hier muss man nichts machen - außer Videos schauen.

Screenshot

🍪 Consent und Kekse

Leider muss es ja sein.

Hiermit kann man in einem Consent-Manager oder auch so mal zwischendurch die Erlaubnis für Vimeo oder Youtube setzen. Wer keine Cookies erlaubt bekommt halt Local-Storage 😉.

<script>
// YouTube
(()=>{letv=JSON.parse(localStorage.getItem('video_consent')||'{}');v.youtube=true;localStorage.setItem('video_consent',JSON.stringify(v));document.cookie='youtube_consent=true; path=/; max-age=2592000; SameSite=Lax; Secure';})();
// Vimeo
(()=>{letv=JSON.parse(localStorage.getItem('video_consent')||'{}');v.vimeo=true;localStorage.setItem('video_consent',JSON.stringify(v));document.cookie='vimeo_consent=true; path=/; max-age=2592000; SameSite=Lax; Secure';})();
</script>

oder für beide

<script>
// Consent für alle unterstützten Video-Plattformen automatisch setzen
(function() {// Vorhandene Einstellungen auslesenletvideoConsent=JSON.parse(localStorage.getItem('video_consent')||'{}');// Consent für alle Plattformen setzenvideoConsent.youtube=true;videoConsent.vimeo=true;// Speichern in localStoragelocalStorage.setItem('video_consent',JSON.stringify(videoConsent));// Cookies ebenfalls setzendocument.cookie='youtube_consent=true; path=/; max-age=2592000; SameSite=Lax; Secure';document.cookie='vimeo_consent=true; path=/; max-age=2592000; SameSite=Lax; Secure';// Optional: Event auslösen, um vorhandene Player zu aktualisierendocument.dispatchEvent(newEvent('vsrun'));})();
</script>

📄 CKE5 Oembed - lässig aufgelöst

(das Plyr-AddOn lässt grüßen)

CKE5 kann ja bekanntlich Videos einbinden, aber liefert nichts für die Ausgabe im Frontend mit. 👋 Hier ist die Lösung:

Einfach im String suchen und umwanden:

echo Video::parseOembedTags($content);

und schon sind die Videos da 😀

…oder in der boot.php vom Project-AddOn (gerne auch im eigenen AddOn) den Outputfilter nutzen.

Outputfilter im Frontend

if (rex::isFrontend()) {
Video::videoOembedHelper();
}

Outputfilter im Backend:

Es soll ja nicht nur vorne schön sein. ❤️ Hier muss man dafür sorgen, dass es ggf. in den Blocks nicht ausgeführt wird.

if (rex::isBackend() && rex_be_controller::getCurrentPagePart(1) == 'content' && !in_array(rex_request::get('function', 'string'), ['add', 'edit'])) {
Video::videoOembedHelper();
}

🎉 HEUREKA!

Jetzt bist du ein Video-Einbettungs-Ninja! Geh raus und mache das Internet zu einem besseren Ort - ein Video nach dem anderen. Und denk dran: Mit großer Macht kommt große Verantwortung (und coole Videos)!

Viel Spaß beim Coden! 🚀👩‍💻👨‍💻

👓 Für die DEVs, Nerds und Geeks

Ihr wollt uns sicher mal bei der Weiterentwicklung helfen. Das geht so:

Den Vendor aktualisieren und ein frisches Build erstellen

Im Ordner build ist alles drin was man braucht.

  • Also forken, lokal runterladen.
  • npm install ausführen
  • npm npm run build ausführen
  • Im Assets-Ordner die Dateien des Dist-Ordners austauschen (Ihr habt richtig gesehen, es gibt auch die reine JS-Variante 😉)

PR erstellen 😀

Alles andere

…fliegt hier so im Repo rum, einfach mal reinschauen. 👀

Wie es arbeitet

Video-Klasse Prozess mit Prüfungen

flowchart TD
A[Start] --> B[Erstelle Video-Objekt mit Dateipfad]
B --> C{Ist es eine gültige Datei?}
C -->|Nein| D[Fehler: Ungültige Datei]
C -->|Ja| E{Ist es ein unterstütztes Format?}
E -->|Nein| F[Fehler: Nicht unterstütztes Format]
E -->|Ja| G[Setze grundlegende Attribute]
G --> H{Ist es ein Video?}
H -->|Ja| I[Setze Video-spezifische Attribute]
H -->|Nein| J[Setze Audio-spezifische Attribute]
I --> K{Poster-Bild angegeben?}
K -->|Ja| L{Ist Poster-Datei gültig?}
L -->|Nein| M[Warnung: Ungültiges Poster]
L -->|Ja| N[Setze Poster-Bild]
K -->|Nein| O[Verwende Standard-Poster]
J --> P[Prüfe auf Untertitel]
N --> P
O --> P
M --> P
P --> Q{Untertitel vorhanden?}
Q -->|Ja| R{Sind Untertitel-Dateien gültig?}
R -->|Nein| S[Warnung: Ungültige Untertitel]
R -->|Ja| T[Füge Untertitel hinzu]
Q -->|Nein| U[Keine Untertitel]
S --> V[Generiere Player-HTML]
T --> V
U --> V
V --> W{HTML erfolgreich generiert?}
W -->|Nein| X[Fehler: HTML-Generierung fehlgeschlagen]
W -->|Ja| Y[Zeige Video/Audio-Player]
Y --> Z[Ende]
D --> Z
F --> Z
X --> Z
Loading

Autor(en)

Friends Of REDAXO

Projektleitung

Thomas Skerbis

Thanks toVidstack.io

About

Vidstack for REDAXO

Topics

hacktoberfest

Resources

Readme
MIT license

Code of conduct

Code of conduct
Activity
Custom properties

Stars

15 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

Packages

Used by

Contributors

Languages

Generated from FriendsOfREDAXO/rex_repo_template