Vorschaubild für lokale Videos einbinden
Aktuell häufen sich die Nachfragen auf Facebook und Forge nach einem individuellen Vorschaubild für Videos. Auch unsere Projektkunden haben diesen Featurewunsch, weshalb wir uns eine Lösung haben einfallen lassen, die wir Euch hier nicht vorenthalten wollen.
Zunächst einmal: Was ist passiert? Früher konnte man im selben Verzeichnis eines hochgeladenen Videos eine Bild-Datei mit dem gleichen Dateinamen des Videos anlegen, welches dann als Vorschaubild verwendet wurde. So schildert es auch die Community, die dieses Feature vermisst: https://forge.typo3.org/issues/71831
Dieses Feature wurde mit TYPO3 7.2 in die System-Extension mediace portiert und mit Veröffentlichung von TYPO3 7.6 dann als TER-Extension ausgelagert. Seit dem wird diese nicht mehr weiterentwickelt und ist mit neueren TYPO3 Versionen nicht mehr kompatibel und aktuell im TER als outdated deklariert.
Für unsere Kunden haben wir einen einfachen Fluid ViewHelper geschrieben, der den Pfad des Videos in seine Einzelteile aufsplittet. Die Coder unter Euch kennen diese Funktionalität aus der Methode GeneralUtility::split_fileref. Wir haben diesen ViewHelper nun in unsere öffentliche jwtools2 Extension eingebaut und zeigen Euch nun, wie Ihr diesen anwenden könnt.
Da Ihr ein Partial der Extension fluid_styled_content anpassen müsst, müsst Ihr zunächst einen weiteren Pfad zu Eurem SitePackage im TypoScript angeben, sofern Ihr das nicht eh schon gemacht habt:
styles.templates {
partialRootPath = EXT:euer_sitepackage/Resources/Private/Extensions/FluidStyledContent/Partials/
}Legt nun in dem Partials-Ordner die Verzeichnisstruktur Media/Rendering an. Im Rendering-Ordner legt Ihr nun die Datei Video.html mit folgendem Inhalt an:
<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:j="http://typo3.org/ns/JWeiland/Jwtools2/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<j:splitFileRef file="{file}">
<f:variable name="poster">{fileParts.path}{fileParts.filebody}.jpg</f:variable>
</j:splitFileRef>
<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: poster}"
/>
</html>
Mit dem j:splitFileRef ViewHelper splitten wir nun den Video-Dateipfad in seine Einzelteile auf und übernehmen das Verzeichnis und den Body (der Name ohne die Endung .mp4) des Dateinamens und fügen diesem hinten ein jpg an. Diesen neuen Dateinamen schreiben wir in die Variable poster und verwenden diese Variable weiter unten bei den additionalAttributes und fügen so das poster-Attribut dem video-Tag hinzu.
Falls Ihr die jwtools2 in Eurem Projekt nicht verwenden wollt, dann könnt Ihr Euch den ViewHelper gerne aus unserer Extension rauskopieren und anpassen. Evtl. habt Ihr auch schon die Extension vhs installiert, dann schaut Euch mal den Replace- oder den PregReplace-ViewHelper an, damit müsste es auch möglich sein die Datei-Endung von mp4 oder Ähnlichem in ein jpg umzuwandeln.