Typo3: Poster (Vorschaubild) bei Videos einfügen

Mit wenig Code lässt sich die Möglichkeit ergänzen in Typo3 Vorschaubilder (Poster) bei Videos anzeigen zu lassen.

Zunächst muss man die FluidStyledContent Partials in der eigenen Template Extension überschreiben. Hierzu füge ich folgende Zeilen ins TypoScript Setup meiner Extension ein:

lib.contentElement {
   partialRootPaths {
      20 = EXT:template_extension/Resources/ext/fluid_styled_content/Private/Partials/
   }
}

Dann muss die Datei "Video.html" im Ordner typo3conf/ext/template_extension/Resources/ext/fluid_styled_content/Private/Partials/Media/Rendering angelegt werden. Hierzu habe ich mir zunächst die Quelldatei typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Video.html kopiert und entsprechend angepasst:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:media class="video-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" additionalConfig="{settings.media.additionalConfig}" 
    additionalAttributes="{poster: '{v:format.replace(substring:file.originalFile.properties.extension,content:file.originalFile.identifier,replacement:\'jpg\') -> v:format.prepend(add: file.originalFile.storage.configuration.basePath)}'}"
/>

</html>

Zu Beachten ist, dass ich hier die Extension fluidtypo3/vhs installiert habe und daher auch diese ViewHelper verwende. Wer lieber einen eigenen ViewHelper schreibt kann dies natürlich auch tun. Was ich nun in meiner Anpassung mache ist, dass ich das Poster-Attribut auf den selben Pfad und Dateinamen wie das Video setze, lediglich die Dateiendung passe ich auf ".jpg" an:

additionalAttributes="{poster: '{v:format.replace(substring:file.originalFile.properties.extension,content:file.originalFile.identifier,replacement:\'jpg\') -> v:format.prepend(add: file.originalFile.storage.configuration.basePath)}'}"

Dann lege ich entsprechnd die Datei "Video.jpg" in den Ordner wo auch "Video.mp4" liegt. Wichtig ist, dass der Dateiname exakt gleich ist und die Dateiendung des Bildes ".jpg" ist. Die Dateiendung des Videos ist egal, diese wird ausgelesen und mit "jpg" ersetzt.

Kommentare und Antworten

×

Name ist erforderlich!

Geben Sie einen gültigen Namen ein

Gültige E-Mail ist erforderlich!

Gib eine gültige E-Mail Adresse ein

Kommentar ist erforderlich!

Captcha Code Kann das Bild nicht gelesen werden? Klicken Sie hier, um zu aktualisieren

Captcha ist erforderlich!

Code stimmt nicht überein!

* Diese Felder sind erforderlich.

Sei der erste der kommentiert