Zum Inhalt springen

Vorlagen-Partials

Modulare Vorlagenstruktur für einfache Wartung und Anpassung.

VidPly TYPO3 Extension Logo

Speicherort

Resources/Private/Partials/VidPly/

Verfügbare Teilvorlagen

1. Assets.html

Registriert CSS- und JavaScript-Assets bedingt

 
<f:render partial="VidPly/Assets" arguments="{
    needsPrivacyLayer: vidply.needsPrivacyLayer,
    needsVidPlay: vidply.needsVidPlay,
    needsPlaylist: vidply.needsPlaylist,
    needsHLS: vidply.needsHLS,
    needsDASH: vidply.needsDASH
}" />
 

Argumente:

  • needsPrivacyLayer - PrivacyLayer.js laden (externe Dienste)
  • needsVidPlay - VidPly-Kern laden (nativer Player)
  • needsPlaylist - PlaylistInit.js laden (Wiedergabelisten/Player-Initialisierung)
  • needsHLS - hls.js laden (HLS-Streaming)
  • needsDASH - dash.js laden (DASH-Streaming)

Wird immer geladen:

  • vidply.min.css - Player-Styling

Wird je nach Medientyp bedingt geladen:

  • privacy-layer.css - Stile der Datenschutzebene (nur externe Dienste)
  • PrivacyLayer.js - YouTube, Vimeo, SoundCloud
  • hls.min.js — vendored hls.js 1.6.16 (nur HLS-Streams)
  • dash.all.min.js — eingebundenes „dash.js“ 5.2.0 (modernes UMD; nur DASH-Streams)
  • PlaylistInit.js - Wiedergabelisten oder Player-Initialisierung
  • vidply/vidply.esm.min.js - Nur nativer Player (plus Code-Split-Blöcke)

Siehe Documentation/AssetLoading.md für Details zur Optimierung.

2. VideoSources.html

Rendert „<source>“-Elemente für Videoplayer

 
<f:render partial="VidPly/VideoSources" arguments="{
    videoUrl: vidply.videoUrl,
    playlistData: vidply.playlistData,
    sources: vidply.sources,
    mediaFiles: vidply.mediaFiles
}" />
 

Unterstützt:

  • Mehrere Quellformate mit Fallback-Reihenfolge (DASH → HLS → MP4/WebM)
  • Mehrere Qualitäts- und Formatoptionen
  • Playlist-Modus
  • Quellen für Audiodeskriptionen

3. AudioSources.html

Rendert „<source>“-Elemente für Audio-Player

 
<f:render partial="VidPly/AudioSources" arguments="{
    playlistData: vidply.playlistData,
    tracks: vidply.tracks,
    sources: vidply.sources,
    mediaFiles: vidply.mediaFiles
}" />
 

Unterstützt:

  • Mehrere Quellformate mit Fallback-Reihenfolge (DASH → HLS → MP3/OGG)
  • Wiedergabelistenmodus
  • Format-Fallback

4. Tracks.html

Rendert Untertitel- und Kapitel<track>-Elemente

 
<f:render partial="VidPly/Tracks" arguments="{
    captions: vidply.captions,
    chapters: vidply.chapters,
    languageSelection: vidply.languageSelection
}" />
 

Wird von Video- und Audio-Playern gemeinsam genutzt. Unterstützt mehrere Sprachen und Spurtypen.

5. MetadataScripts.html

JSON-Daten für Audiodeskription und Gebärdensprache (werden vom Player bei der Initialisierung gelesen – nicht JSON-LD)

 
<f:render partial="VidPly/MetadataScripts" arguments="{
    uniqueId: vidply.uniqueId,
    audioDescriptionTracks: vidply.audioDescriptionTracks,
    audioDescription: vidply.audioDescription,
    signLanguage: vidply.signLanguage
}" />
 

Wird von Videoplayern für Metadaten zu Audiodeskriptions- und Gebärdensprach-Spuren verwendet.

 

SEO-JSON-LD (VideoObject / AudioObject) wird separat auf der Seite ausgegeben <head> über Partials/Page/StructuredDataVideo.html — siehe Entwickler-Schnellstart → Strukturierte Daten.

 

6. PrivacyLayer.html

DSGVO-Einwilligungslayer für externe Dienste

 
<f:render partial="VidPly/PrivacyLayer" arguments="{
    service: 'youtube',
    videoUrl: vidply.videoUrl,
    poster: vidply.poster,
    title: data.header,
    uniqueId: vidply.uniqueId,
    privacySettings: vidply.privacySettings.youtube
}" />
 

Zeigt eine Wiedergabetaste mit Datenschutzhinweis für YouTube, Vimeo und SoundCloud an. Verwendet die Datenbankeinstellungen aus der tx_mpcvidply_privacy_settings Tabelle, mit Fallback auf Übersetzungen aus der Sprachdatei. Lädt bei Einwilligung ein Iframe.

Struktur der Datenschutzeinstellungen:

 
[
    'headline' => 'Optional headline',
    'intro_text' => 'Text before link',
    'outro_text' => 'Text after link',
    'policy_link' => 'https://...',
    'link_text' => 'Link text',
    'button_label' => 'Button aria-label'
]
 

Vorlagenstruktur

 
VidPly.html (Main)
└── VidPly/Player.html (wrapper + renderMode switch)
    ├── privacy → PrivacyLayer.html
    ├── mixedPlaylist → MixedPlaylistPlayer.html
    ├── audio → AudioPlayer.html
    └── video → VideoPlayer.html
        ├── VideoSources.html / AudioSources.html
        ├── Tracks.html
        └── MetadataScripts.html (video only)
    └── Assets.html (conditional JS/CSS)
 

Auf Seitenebene: Partials/Page/StructuredDataVideo.html (JSON-LD in <head>).

Anpassung

Überschreibung im Sitepackage

TypoScript:

 
tt_content.mpc_vidply {
    partialRootPaths.100 = EXT:your_sitepackage/Resources/Private/Partials/
}
 

Benutzerdefiniertes Partial erstellen:

 
your_sitepackage/
└── Resources/Private/Partials/VidPly/
    └── VideoSources.html  ← Your customization
 

Andere Partials bleiben unverändert.

Listview- und Detailvorlagen

Speicherort: Resources/Private/Partials/Listview/ und Resources/Private/Templates/Listview.html / Detail.html

Partial / VorlageRolle
Listview/RowEin Regal oder eine Rasterzeile: Überschrift, Sortierung <select>, optionaler Paginierungs-Wrapper
Listview/RowListBodyGemeinsam genutzt <ul> für Raster oder Regal (mit oder ohne Paginierung verwendbar)
Listview/CardEinzelne Medienkarte (Poster, Titel, Interpret, Kategorie-Chips, Link)
Listview/ShelfArrowsSteuerelemente „Zurück/Weiter“ für das horizontale Regal

Auf dieselbe Weise überschreiben mit partialRootPaths für mpc_vidply Listansicht TypoScript, falls Ihr Sitepackage ein anderes Markup benötigt; behalten Sie data-* Attribute bei, wenn Sie auf Listview.js (Shelf, Sortierung, Paginierung).

Vorteile

  • Einzige Zuständigkeit – Jedes Partial hat einen klaren Zweck
  • Wiederverwendbarkeit – Teilvorlagen, die von Video- und Audio-Inhalten gemeinsam genutzt werden, werden nachverfolgt
  • Einfaches Überschreiben – Passen Sie nur das an, was Sie benötigen
  • Wartbarkeit – Änderungen beschränken sich auf bestimmte Dateien
  • Lesbarkeit – Die Hauptvorlage wurde von 250 auf 130 Zeilen reduziert

Keine kompatibilitätsbrechenden Änderungen

Durch die Refaktorisierung bleiben HTML-Ausgabe und Funktionalität unverändert. Bestehende Konfigurationen funktionieren ohne Änderungen.

Seite teilen