Player, Wasserzeichen, Intros & Vorschauen

TubePress spielt hochgeladene und URL-basierte Videos mit FluidPlayer ab, einem selbst gehosteten HTML5-Player, der in vendor/fluidplayer enthalten ist. Rund um den Player befinden sich verschiedene Funktionen, die während der Transcodierung erzeugt werden — Wasserzeichen, Intro- und Outro-Clips sowie Scrubbing-Vorschaubilder — zusätzlich zu den Hover-Vorschauen auf Listenansichts-Karten.

Das Player-Verhalten wird unter Darstellung → Wiedergabe konfiguriert; die Funktionen für Wasserzeichen, Intro und Timeline befinden sich auf den entsprechenden /admin/settings?tab=transcode-Unterregisterkarten, da sie in das Video eincodiert werden und nicht zur Wiedergabezeit umgeschaltet werden.

Der Video-Player

Für ein hochgeladenes oder URL-basiertes Video rendert TubePress ein <video>-Element mit einer <source> pro Rendition und initialisiert FluidPlayer darauf. Da jede Rendition als separate Quelle mit Qualitätsbeschriftung aufgeführt wird (und ab 720p als HD markiert ist), bietet der Player ein integriertes Qualitätsmenü. Die Akzentfarbe folgt der Primärfarbe Ihres Themes, und die Steuerung blendet sich während der Wiedergabe automatisch aus.

Das Paket enthält Module für adaptives Streaming (HLS und MPEG-DASH), WebVTT und 360°/VR-Wiedergabe und kann daher bei Bedarf mehr als einfaches MP4 verarbeiten. Videos mit einem Einbettungscode umgehen FluidPlayer vollständig und rendern stattdessen ihren Quell-iframe.

Wasserzeichen

Ein Wasserzeichen ist ein Logo, das über das Video gelegt wird. In TubePress wird es während der Transcodierung von FFmpeg in jede Rendition eincodiert und nicht vom Player gezeichnet — es kann daher nicht clientseitig entfernt werden, erfordert jedoch eine Transcodierung und erscheint nur auf Videos, die nach der Aktivierung verarbeitet wurden. Konfigurieren Sie es auf dem Unterreiter Wasserzeichen:

Eine Live-Vorschau im Editor zeigt ungefähr, wie das Overlay positioniert wird, aber das endgültige Wasserzeichen wird von FFmpeg beim nächsten Encodiervorgang aufgebracht.

Pre-Roll-Intros

Sie können jedem Video einen kurzen Clip voranstellen — ein Pre-Roll-Intro — und einen Post-Roll-Outro anhängen, beides auf dem Unterreiter Intros. Jedes ist ein MP4-Upload, der unter uploads/intros/ gespeichert wird. Wie Wasserzeichen sind sie Teil der Codierung: Während der Transcodierung wird jeder Clip neu codiert, um der genauen Auflösung, dem Codec und der Bitrate jedes Ausgabeformats zu entsprechen, und dann nahtlos angehängt, sodass es keinen Qualitätssprung im Stream gibt.

Für Werbeclips, die innerhalb des Players abgespielt werden, anstatt in die Datei eincodiert zu werden, verwenden Sie stattdessen VAST-Pre/Mid/Post-Rolls aus dem Anzeigen-System.

Timeline-Vorschauen

Timeline-Vorschauen sind die kleinen Thumbnails, die beim Scrubben der Fortschrittsleiste erscheinen. Auf dem Unterreiter Timeline lässt das Aktivieren von Timeline-Screenshots generieren den Transcoder ein Sprite aus Frames sowie eine timeline.vtt-Karte erstellen, die FluidPlayer automatisch in die Suchleiste einbindet, sobald sie fertig ist.

Das Sprite wird als eigener Warteschlangenjob generiert, sodass Vorschauen kurz nach der Veröffentlichung des Videos erscheinen können.

Hover-Vorschauen

Getrennt vom Player spielen Listenansichts-Karten einen kurzen Vorschauclip ab, wenn der Besucher darüber fährt — ein echtes preview.mp4 pro Video, nicht das Timeline-Sprite. Dies wird durch die Karten-Hover-Einstellung in den Darstellungsoptionen Ihres Themes gesteuert und gibt Besuchern einen schnellen Einblick in jedes Video, ohne die Watch-Seite zu öffnen.

Player-Einstellungen

Öffnen Sie Darstellung → Wiedergabe, um den Player zu steuern. Diese Optionen gelten nur für hochgeladene und URL-basierte Videos, nicht für Einbettungen.

Der gleiche Bildschirm schaltet um, welche Metadaten rund um den Player erscheinen — Aufrufe, Dauer, Veröffentlichungsdatum, Like/Dislike und die Favoriten-Schaltfläche, plus die Bereiche Darsteller, Kanäle, Kategorien und Tags — und legt fest, wie viele verwandte Videos (2–20) in der Seitenleiste angezeigt werden.

Nächste Schritte