Include preview image for local videos
There are currently increasing requests on Facebook and Forge for an individual preview image for videos. Our project customers also have this feature request, which is why we have come up with a solution that we don't want to withhold from you here.
First of all: What happened? In the past, you could create an image file with the same file name as the video in the same directory of an uploaded video, which was then used as the preview image. This is also how the community describes it, which misses this feature: https: //forge.typo3.org/issues/71831
This feature was ported to the system extension mediace with TYPO3 7.2 and then removed as a TER extension with the release of TYPO3 7.6. Since then it has not been developed further and is no longer compatible with newer TYPO3 versions and is currently declared as outdated in the TER.
For our customers, we have written a simple Fluid ViewHelper that splits the path of the video into its individual parts. The coders among you know this functionality from the GeneralUtility::split_fileref method. We have now integrated this ViewHelper into our public jwtools2 extension and will now show you how to use it.
Since you have to adapt a partial of the extension fluid_styled_content, you must first specify another path to your SitePackage in the TypoScript, if you have not already done so:
styles.templates {
partialRootPath = EXT:your_sitepackage/Resources/Private/Extensions/FluidStyledContent/Partials/
}Now create the Media/Rendering directory structure in the Partials folder. In the Rendering folder, create the file Video.html with the following content:
<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>
With the j:splitFileRef ViewHelper, we now split the video file path into its individual parts and take over the directory and the body (the name without the ending .mp4) of the file name and add a jpg to the end. We write this new file name in the variable poster and use this variable further down in the additionalAttributes and thus add the poster attribute to the video tag.
If you don't want to use jwtools2 in your project, you can copy the ViewHelper from our extension and adapt it. Maybe you have already installed the extension vhs, then have a look at the Replace- or the PregReplace-ViewHelper, with which it should also be possible to convert the file extension from mp4 or similar into a jpg.
This page contains automatically translated content.