Zum Inhalt springen

Incluir imagen de previsualización para vídeos locales

Cada vez hay más peticiones en Facebook y Forge de una imagen de previsualización personalizada para los vídeos. Nuestros clientes del proyecto también tienen esta petición de funcionalidad, por lo que hemos ideado una solución que no queremos ocultarte aquí.

En primer lugar: ¿Qué ha pasado? En el pasado, se podía crear un archivo de imagen con el mismo nombre de archivo que el vídeo en el mismo directorio de un vídeo subido, que luego se utilizaba como imagen de vista previa. Así lo describe también la comunidad, que echa de menos esta función: https: //forge.typo3.org/issues/71831.

Esta característica fue portado a la extensión del sistema mediace con TYPO3 7.2 y luego eliminado como una extensión TER con el lanzamiento de TYPO3 7.6. Desde entonces no se ha desarrollado más y ya no es compatible con las nuevas versiones de TYPO3 y actualmente está declarada como obsoleta en el TER.

Para nuestros clientes, hemos escrito un simple Fluid ViewHelper que divide la ruta del vídeo en sus partes individuales. Los programadores entre ustedes estarán familiarizados con esta funcionalidad del método GeneralUtility::split_fileref. Hemos incorporado este ViewHelper a nuestra extensión pública jwtools2 y ahora le mostraremos cómo utilizarlo.

Como tiene que adaptar un parcial de la extensión fluid_styled_content, primero debe especificar otra ruta a su SitePackage en el TypoScript, si no lo ha hecho ya:

styles.templates {
  partialRootPath = EXT:your_sitepackage/Resources/Private/Extensions/FluidStyledContent/Partials/
}

Ahora cree la estructura de directorios Media/Rendering en la carpeta Partials. En la carpeta Rendering, cree el archivo Video.html con el siguiente contenido:

<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 archivo="{archivo}">
	<f:variable name="póster">{fileParts.path}{fileParts.filebody}.jpg</f:variable>
</j:splitFileRef>

<f:media
	class="video-embed-item"
	file="{file}"
	width="{dimensions.width}"
	height="{dimensions.height}"
	alt="{archivo.alternativo}"
	title="{file.title}"
	additionalConfig="{settings.media.additionalConfig}"
	additionalAttributes="{poster: poster}"
/>
</html>

Con el ViewHelper j:splitFileRef ahora dividimos la ruta del archivo de vídeo en sus partes individuales y tomamos el directorio y el cuerpo (el nombre sin la terminación .mp4) del nombre del archivo y añadimos un jpg al final. Escribimos este nuevo nombre de archivo en la variable poster y usamos esta variable más abajo en los additionalAttributes y así añadimos el atributo poster a la etiqueta video.

Si no quieres usar jwtools2 en tu proyecto, puedes copiar el ViewHelper de nuestra extensión y adaptarlo. Quizás ya tengas instalada la extensión vhs, entonces echa un vistazo al Replace- o al PregReplace-ViewHelper, con los que también debería ser posible convertir la extensión de archivo de mp4 o similar en jpg.

El contenido de esta página se ha traducido automáticamente.

Aktualisiert: 17.07.2024