Videohub
1. Wofuer ist diese Funktion
Der Videohub bietet eine zentrale Verwaltungsoberflaeche fuer alle Videos innerhalb von Octoserv. Er integriert das Plugin Presto Player nahtlos in die Octoserv-Oberflaeche, sodass Videos verwaltet und deren Nutzungsstatistiken ausgewertet werden koennen -- alles ohne die Octoserv-Umgebung zu verlassen.
Der Videohub ist ueber den Navigationspunkt "Videohub" in der Sidebar erreichbar und gliedert sich in zwei Unterseiten:
| Unterseite | Navigationspunkt | Beschreibung |
|---|---|---|
| Videos | Videohub | Uebersicht und Verwaltung aller Presto-Player-Videobloecke. |
| Analytics | Video Analytics | Auswertungen und Statistiken zur Videonutzung. |
Beide Unterseiten sind iFrame-basierte Integrationen der entsprechenden Presto-Player-Verwaltungsseiten. Die WordPress-Admin-Oberflaeche (Adminbar, Seitenmenue, Footer) wird dabei ausgeblendet und durch angepasstes CSS ersetzt, das sich in das Octoserv-Design einfuegt.
Im Unterschied zum Formulareditor, der Fluent Forms einbettet, nutzt der Videohub Presto Player als Basis. Presto Player arbeitet mit sogenannten "Video Blocks" (pp_video_block) -- einem eigenen Custom Post Type in WordPress. Die Videoliste zeigt daher eine WordPress-Post-Type-Tabelle mit angepasstem Styling.
2. Ziel und Vorteil
- Zentrale Videoverwaltung: Alle Videos koennen direkt innerhalb der Octoserv-Oberflaeche verwaltet werden. Ein Wechsel in das WordPress-Backend ist nicht erforderlich.
- Angepasstes Design: Die Presto-Player-Oberflaeche wird visuell vollstaendig an das Octoserv-Design angepasst. Tabellen, Buttons, Formularelemente und Paginierung folgen dem Octoserv-Farbschema (orange Akzentfarbe #e09000).
- Detaillierte Analytics: Die integrierte Analytics-Seite bietet Einblicke in die Videonutzung -- Wiedergaben, Abspieldauer, Absprungpunkte und mehr.
- Nahtloser Arbeitsfluss: Videos erstellen, bearbeiten und deren Performance analysieren erfolgt in einem einheitlichen Interface, ohne zwischen verschiedenen Verwaltungsoberflaechen wechseln zu muessen.
- Automatische Ladeanzeige: Waehrend die iFrame-Inhalte geladen werden, zeigt ein animierter Ladeindikator den Ladezustand an. Bei Fehlern wird eine verstaendliche Fehlermeldung angezeigt.
- Stoerfreie Ansicht: Presto-Player-eigene Branding-Elemente (Header, Logo, NPS-Umfragen) werden automatisch ausgeblendet, um eine aufgeraeuemte Ansicht zu bieten.
3. Detaillierte Funktionsbeschreibung
3.1 Technische Architektur
Beide Unterseiten des Videohubs folgen demselben technischen Muster:
- Template-Datei: Jede Unterseite hat ein eigenes PHP-Template (
templates/videohub/list.php,templates/videohub/analytics.php). - iFrame-Einbettung: Die jeweilige Presto-Player-Admin-Seite wird per iFrame geladen.
- CSS-Injection: Nach dem Laden des iFrames wird per JavaScript umfangreiches CSS in das iFrame-Dokument injiziert, um die WordPress-Admin-Elemente auszublenden und saemtliche UI-Elemente an das Octoserv-Design anzupassen.
- Ladeanzeige: Eine Ladeanimation (Spinner) wird angezeigt, bis der iFrame vollstaendig geladen ist.
- Fehlerbehandlung: Falls der iFrame nicht geladen werden kann, wird eine Fehlermeldung angezeigt.
3.2 Unterseite: Videos
Navigationspunkt: "Videohub"
Seitentitel: "Videohub"
iFrame-Quelle: edit.php?post_type=pp_video_block (Presto Player Video Blocks)
Hilfe-Schluessel: videohub
Diese Unterseite zeigt die Uebersicht aller Presto-Player-Videobloecke in einer WordPress-Post-Type-Tabelle. Hier koennen:
- Alle vorhandenen Videobloecke in einer Listenansicht eingesehen werden (Titel, Datum, Status).
- Neue Videobloecke erstellt werden (ueber den "Erstellen"-Button, der den WordPress-Block-Editor oeffnet).
- Bestehende Videobloecke bearbeitet, dupliziert oder geloescht werden.
- Videobloecke nach Status gefiltert werden (Alle, Veroeffentlicht, Entwurf, Papierkorb).
- Massenaktionen auf mehrere Videobloecke gleichzeitig angewendet werden.
- Die Suchfunktion genutzt werden, um Videobloecke nach Titel zu finden.
3.3 Unterseite: Analytics
Navigationspunkt: "Video Analytics"
Seitentitel: "Video Analytics"
iFrame-Quelle: edit.php?post_type=pp_video_block&page=presto-analytics#/ (Presto Player Analytics)
Hilfe-Schluessel: video-analytics
Diese Unterseite zeigt die Presto-Player-Analytics-Oberflaeche. Hier koennen:
- Gesamtstatistiken zur Videonutzung eingesehen werden (Wiedergaben, eindeutige Zuschauer, durchschnittliche Wiedergabedauer).
- Performance-Daten einzelner Videos verglichen werden.
- Zeitbasierte Trends in der Videonutzung analysiert werden.
- Abspielverhalten und Absprungpunkte identifiziert werden.
Die Analytics-URL verwendet einen Hash-Router (#/), da Presto Player fuer seine Analytics-Seite eine Single-Page-Application (SPA) einsetzt.
3.4 CSS-Injection und Design-Anpassung
Der Videohub verwendet eine umfangreiche CSS-Injection, die weit ueber das blosse Ausblenden von WordPress-Admin-Elementen hinausgeht. Die gesamte WordPress-Post-Type-Tabelle wird visuell neu gestaltet:
Ausgeblendete Elemente:
| Element | CSS-Selektor | Zweck der Ausblendung |
|---|---|---|
| Admin-Menue | #adminmenu, #adminmenuwrap |
Octoserv hat eine eigene Navigation. |
| Admin-Bar | #wpadminbar |
Wird durch die Octoserv-Headerleiste ersetzt. |
| Footer | #wpfooter |
Nicht benoetigt. |
| Presto-Player-Header | .presto-player-dashboard__header |
Presto-Player-Branding wird zugunsten des Octoserv-Headers ausgeblendet. |
| NPS-Umfrage | #nps-survey-wrapper |
Presto-Player-eigene Umfragen werden unterdrueckt. |
| Hinweismeldungen | .notice, .updated, .error |
WordPress-Admin-Hinweise werden ausgeblendet. |
| Bildschirmoptionen | .screen-meta-toggle, #screen-meta-links |
Nicht benoetigt in der Octoserv-Ansicht. |
Angepasste Elemente:
| Element | Anpassung |
|---|---|
| Hintergrund | Hellgrauer Hintergrund (#f3f4f6) statt WordPress-Standard. |
| Tabelle | Weisser Hintergrund, abgerundete Ecken, dezenter Schatten. |
| Tabellenkopf | Hellgrauer Hintergrund, dunkelgraue Schrift, fette Schriftstaerke. |
| Tabellenzeilen | Hover-Effekt, keine sichtbaren Trennlinien ausser feinem hellgrauen Rand. |
| Buttons (primaer) | Orange Akzentfarbe (#e09000) mit weisser Schrift. |
| Buttons (sekundaer) | Hellgrauer Hintergrund mit grauer Schrift. |
| Links | Dunkelgrau, bei Hover orange. |
| Loesch-Links | Bei Hover rot (#dc2626). |
| Formularelemente | Einheitliche Rahmen, abgerundete Ecken, orange Fokus-Farbe. |
| Paginierung | Weisse Buttons mit grauem Rand, bei Hover orange Hintergrund. |
| Checkboxen | Bei Selektion orange Hintergrund. |
| Filter-Tabs | Grau, bei Selektion/Hover orange mit fetter Schrift. |
3.5 Ladeverhalten
Der Ladevorgang laeuft fuer beide Unterseiten identisch ab:
- Die Seite wird geoeffnet. Ein Spinner mit dem Text "Einen Moment bitte. Die Ansicht wird geladen." wird angezeigt.
- Der iFrame beginnt im Hintergrund zu laden (initial mit
display: none). - Sobald das
load-Event des iFrames ausgeloest wird, wird das umfangreiche CSS injiziert. - Der Spinner wird mit einer sanften Ueberblendung (200ms Fadeout) ausgeblendet.
- Der iFrame wird mit einer sanften Ueberblendung (200ms Fadein) eingeblendet.
- Falls der iFrame nicht geladen werden kann (Error-Event), wird anstelle des Spinners eine Fehlermeldung in Rot angezeigt.
4. Benutzerdokumentation / Anwendung
4.1 Videohub-Seite aufrufen
- In der Sidebar auf "Videohub" klicken.
- Die Presto-Player-Videouebersicht wird innerhalb der Octoserv-Oberflaeche geladen.
- Alle vorhandenen Videobloecke werden in einer Listenansicht angezeigt.
4.2 Neuen Videoblock erstellen
- Unter "Videohub" > "Videos" auf den "Erstellen"-Button klicken.
- Der WordPress-Block-Editor oeffnet sich innerhalb des iFrames.
- Den Presto-Player-Block hinzufuegen und eine Videoquelle angeben (URL, Upload oder Mediathek).
- Videoeinstellungen konfigurieren (Autoplay, Untertitel, Branding etc.).
- Den Videoblock veroeffentlichen oder als Entwurf speichern.
4.3 Bestehenden Videoblock bearbeiten
- Unter "Videohub" > "Videos" in der Listenansicht auf den Titel des Videoblocks klicken.
- Der Block-Editor oeffnet sich mit dem ausgewaehlten Videoblock.
- Aenderungen vornehmen (z.B. Videoquelle tauschen, Einstellungen anpassen).
- Die Aenderungen speichern.
4.4 Video Analytics einsehen
- In der Sidebar auf "Video Analytics" klicken (oder unter "Videohub" die Analytics-Unterseite waehlen).
- Die Presto-Player-Analytics-Oberflaeche wird geladen.
- Gesamtstatistiken und einzelne Videometriken koennen eingesehen werden.
- Zeitraeume und Filter nutzen, um die Auswertung auf bestimmte Videos oder Perioden einzugrenzen.
4.5 Fehlerbehebung
Falls eine Unterseite nicht geladen werden kann und die Fehlermeldung "Fehler beim Laden der Videos/Analytics. Bitte laden Sie die Seite neu." erscheint:
- Die Seite im Browser neu laden (F5 oder Strg+R).
- Sicherstellen, dass das Plugin Presto Player aktiviert ist.
- Falls das Problem weiterhin besteht, pruefen, ob der aktuelle Benutzer ausreichende Berechtigungen fuer den Zugriff auf Presto Player hat.
5. Anwendungsbeispiele
Beispiel 1: Produktvideo fuer die Website erstellen
Ein Unternehmen moechte ein Erklaervideo fuer ein Produkt auf der Website einbinden.
Vorgehen:
- Unter "Videohub" > "Videos" einen neuen Videoblock erstellen.
- Das Erklaervideo als Quelle angeben (z.B. eine YouTube-URL oder ein hochgeladenes Video).
- Branding-Einstellungen konfigurieren (eigenes Logo, Farben).
- Den Videoblock veroeffentlichen.
- Den generierten Shortcode oder Block in die gewuenschte WordPress-Seite einfuegen.
- Unter "Video Analytics" die Wiedergabestatistiken verfolgen, um zu sehen, wie viele Besucher das Video ansehen und wie lange sie schauen.
Beispiel 2: Webinar-Aufzeichnungen verwalten
Ein Unternehmen stellt Webinar-Aufzeichnungen fuer Teilnehmer bereit und moechte die Nutzung verfolgen.
Vorgehen:
- Unter "Videohub" > "Videos" fuer jede Aufzeichnung einen Videoblock erstellen.
- Jedem Videoblock einen aussagekraeftigen Titel geben (z.B. "Webinar: Einfuehrung in CRM -- Januar 2026").
- Die Videos auf den entsprechenden Seiten einbinden.
- Regelmaessig unter "Video Analytics" pruefen, welche Aufzeichnungen am meisten angesehen werden.
- Basierend auf den Analytics-Daten entscheiden, welche Themen fuer zukuenftige Webinare besonders gefragt sind.
Beispiel 3: Video-Performance ueber alle Inhalte hinweg vergleichen
Ein Unternehmen hat zahlreiche Videos auf verschiedenen Seiten und moechte wissen, welche Videos die beste Zuschauerbindung haben.
Vorgehen:
- Unter "Video Analytics" die Gesamtuebersicht oeffnen.
- Die Wiedergabezahlen und durchschnittlichen Wiedergabedauern der einzelnen Videos vergleichen.
- Videos mit hoher Absprungrate identifizieren und deren Inhalte oder Platzierung optimieren.
- Erfolgreiche Videoformate als Vorlage fuer zukuenftige Produktionen nutzen.