Vídeos AMP
Muestra vídeos de productos en páginas de AMP (Accelerated Mobile Pages) utilizando los componentes de vídeo compatibles con AMP para que tus vídeos aparezcan en páginas móviles de carga rápida.
Disponible desde v3.0.0
Descripción general
Las páginas AMP utilizan un subconjunto restringido de HTML — las etiquetas estándar <iframe> y <video> no están permitidas. Esta funcionalidad genera los componentes AMP correctos (<amp-youtube>, <amp-vimeo>) e inyecta las cabeceras de script necesarias para que los vídeos funcionen en las páginas de producto AMP sin provocar errores de validación.
Dado que AMP lo proporciona un módulo o tema independiente — no PrestaShop en sí —, esta funcionalidad actúa a través de tres hooks que tu tema o módulo AMP debe invocar en sus plantillas. Una vez colocados esos hooks y activada la opción Vídeos AMP, los vídeos de producto de tu tienda aparecen en el carrusel de imágenes y en el área de contenido del producto en cada página de producto AMP.
El módulo también incluye un análisis de cabeceras puntual que comprueba si los scripts de los componentes AMP necesarios ya están presentes en tu plantilla AMP, evitando errores de scripts duplicados en páginas que ya los cargan por sí mismas.
Configuración
- Ve a Módulos > Gestor de módulos, busca Product Video y haz clic en Configurar.
- Navega a la pestaña Integración AMP.
- Activa Usar vídeos AMP y ajusta las opciones que se detallan a continuación.
- Haz clic en Guardar.
- Tras guardar, activa Revisar cabeceras AMP (una vez) y guarda de nuevo — esto permite que el módulo detecte qué etiquetas de script AMP necesita generar.
| Ajuste | Valores | Predeterminado | Descripción |
|---|---|---|---|
| Usar vídeos AMP | Sí / No | No | Interruptor principal. Debe estar activado para que se genere cualquier salida de vídeo AMP. |
| Reproducción automática en el carrusel | Sí / No | Sí | Intenta reproducir automáticamente los vídeos en el carrusel AMP. Los vídeos se inician en silencio; el sonido solo se activa cuando el cliente toca el vídeo. La reproducción automática puede estar bloqueada en algunos dispositivos independientemente de este ajuste. |
| Mostrar controles en los vídeos | Sí / No | No | Muestra los controles de reproducción nativos (reproducir, pausar, línea de tiempo) en los componentes de vídeo AMP. |
| Revisar cabeceras AMP (una vez) | Sí / No | — | Actívalo una vez para iniciar un análisis del <head> de la página AMP en busca de scripts de componentes de vídeo ausentes. El módulo guarda el resultado y restablece automáticamente este interruptor a No. Vuelve a activarlo si cambias tu tema AMP. |
| Cabeceras faltantes encontradas | Solo lectura | — | Muestra qué scripts de componentes AMP faltan en tu plantilla AMP, o "Todas las cabeceras requeridas ya están presentes" si no falta ninguna. |
Tras cambiar de tema o actualizar tu módulo AMP, vuelve a activar Revisar cabeceras AMP (una vez) y guarda. El resultado del análisis anterior puede ya no ser válido.
Colocación de hooks requerida
Tú o el desarrollador de tu tema/módulo AMP debéis añadir tres hooks a la plantilla de la página de producto AMP. Estos hooks no se invocan automáticamente — deben colocarse en el código fuente de la plantilla.
1. Dentro de <head>
{hook h='displayAMPAdditionalHeaders'}
Genera las etiquetas <script async custom-element="..."> requeridas por AMP para los componentes de vídeo. Coloca este hook en cualquier lugar dentro de la etiqueta <head> de tu plantilla de producto AMP. Si el análisis de Revisar cabeceras AMP detectó que los scripts ya están presentes, este hook no genera ningún contenido para evitar duplicados.
2. Dentro del carrusel de imágenes
{hook h='displayAMPVideosCarousel'}
Genera un componente de vídeo AMP por cada vídeo del producto, dimensionado para coincidir con las medidas de las imágenes del producto. Coloca este hook dentro del bloque <amp-carousel> junto a las diapositivas <amp-img>.
Este hook solo genera vídeos cuando la ubicación de visualización Galería de imágenes está activada en la configuración principal de Visualización de vídeo (
PV_DISPLAY_IMG). Si utilizas únicamente los modos de visualización en panel lateral o área de contenido, usadisplayAMPVideosContenten su lugar.
3. En el área de contenido del producto
{hook h='displayAMPVideosContent'}
Genera un reproductor de vídeo AMP independiente con el ancho y alto configurados en Dimensiones del vídeo. Coloca este hook en la plantilla del producto donde quieras que aparezca el vídeo — por ejemplo, antes o después de la descripción larga.
Este hook solo genera vídeos cuando está activada la ubicación de visualización Panel lateral o Contenido/Pestañas en la configuración principal de Visualización de vídeo.
Cómo funciona
Cuando Usar vídeos AMP está activado y un cliente visita la página AMP de un producto:
displayAMPAdditionalHeadersse activa en el<head>. Si el análisis de Revisar cabeceras AMP encontró scripts ausentes, el módulo genera las etiquetas<script>correspondientes. Si el análisis detectó que todos los scripts ya estaban presentes, este hook no genera nada.displayAMPVideosCarouselse activa dentro del<amp-carousel>y genera una diapositiva de vídeo AMP por cada vídeo asignado al producto. Los vídeos se dimensionan para coincidir con el tipo de imagen del producto configurado en los ajustes de galería.displayAMPVideosContentse activa en el área de contenido y genera un reproductor independiente utilizando el ancho y alto del vídeo definidos en la configuración de Dimensiones del vídeo.
El módulo usa <amp-youtube> para vídeos de YouTube y <amp-vimeo> para vídeos de Vimeo, extrayendo el ID del vídeo a partir de la URL almacenada. La reproducción automática y los controles se aplican a los vídeos del carrusel según tu configuración.
Qué hace "Revisar cabeceras AMP"
Cuando activas este interruptor y guardas, el módulo obtiene tu página de producto AMP, analiza la sección <head> y comprueba qué scripts de componentes AMP (amp-youtube, amp-vimeo, etc.) ya carga tu tema. Guarda la lista de scripts ausentes en su configuración. A partir de ese momento, displayAMPAdditionalHeaders solo genera los scripts que faltan — no todos — evitando duplicados. El interruptor se restablece automáticamente a No una vez completado el análisis.
Ejemplos de uso
Ejemplo: vídeos en el carrusel de imágenes
Tienes un producto con dos vídeos de YouTube y tu módulo AMP usa un <amp-carousel> para las imágenes del producto. Añades {hook h='displayAMPVideosCarousel'} dentro de la etiqueta <amp-carousel>, activas Usar vídeos AMP y ejecutas el análisis de cabeceras. Cuando un cliente visita la página AMP del producto, los dos vídeos aparecen como diapositivas adicionales en el carrusel junto a las fotos del producto. Con Reproducción automática activada, la primera diapositiva de vídeo empieza a reproducirse en silencio cuando entra en el campo de visión.
Ejemplo: vídeo debajo de la descripción del producto
Tu tema AMP coloca la descripción del producto en un bloque <div class="description">. Añades {hook h='displayAMPVideosContent'} inmediatamente después de ese bloque y activas la ubicación de visualización Contenido/Pestañas en la configuración principal de Visualización de vídeo. El vídeo de Vimeo del producto aparece ahora debajo de la descripción en cada página de producto AMP, dimensionado según tu configuración de Dimensiones del vídeo.
Ejemplo: prevención de errores de validación AMP
Tras activar Vídeos AMP aparecen errores de validación AMP por scripts amp-youtube ausentes. Abres la configuración de Integración AMP, activas Revisar cabeceras AMP (una vez) y guardas. El módulo analiza la página, detecta el script ausente y, a partir de ese momento, lo genera automáticamente a través de displayAMPAdditionalHeaders. Los errores de validación desaparecen.
Notas importantes
- AMP no está incluido en PrestaShop de forma predeterminada. Esta funcionalidad solo funciona si tu tienda dispone de un módulo o tema AMP independiente que genere páginas de producto AMP e invoque los tres hooks descritos anteriormente.
- En modo AMP solo se admiten YouTube y Vimeo. Los vídeos HTML5 y los vídeos de proveedores personalizados no pueden renderizarse como componentes AMP y no aparecerán en las páginas AMP.
- El hook del carrusel requiere que la visualización en Galería de imágenes esté activada. Si utilizas un modo de visualización distinto a Galería de imágenes, usa
displayAMPVideosContentpara el área de contenido. - El comportamiento de la reproducción automática depende del dispositivo. La especificación AMP permite la reproducción automática en algunas implementaciones, pero los navegadores móviles y las cachés AMP pueden anularla independientemente de tu configuración.
- Ejecuta el análisis de cabeceras una vez tras la configuración inicial y de nuevo tras cualquier cambio de tema AMP. Sin un resultado de análisis, el módulo no puede saber si debe generar los scripts AMP por sí mismo, y te arriesgas a que falten scripts o a tener duplicados.
- Multishop: Los ajustes de Vídeos AMP son por tienda. Cada contexto de tienda puede activar o desactivar Vídeos AMP de forma independiente y configurar sus opciones de reproducción automática y controles.
Resolución de problemas
| Problema | Solución |
|---|---|
| No aparecen vídeos en las páginas de producto AMP | Confirma que Usar vídeos AMP está activado. Verifica que los tres hooks estén colocados en tu plantilla AMP. Comprueba que el producto tenga al menos un vídeo de YouTube o Vimeo asignado. |
| El hook del carrusel no muestra nada | Comprueba que la ubicación de visualización Galería de imágenes está activada en la configuración principal de Visualización de vídeo. El hook displayAMPVideosCarousel solo se activa cuando esa ubicación está habilitada. |
| El hook de contenido no muestra nada | Comprueba que la ubicación de visualización Panel lateral o Contenido/Pestañas está activada en la configuración principal de Visualización de vídeo. |
| Error de validación AMP: script requerido ausente | Activa Revisar cabeceras AMP (una vez) y guarda. El módulo detectará y recordará el script ausente, y lo generará en las siguientes cargas de página a través de displayAMPAdditionalHeaders. |
| Errores de scripts AMP duplicados | Ejecuta el análisis de Revisar cabeceras AMP — tras el análisis, el módulo detecta que los scripts ya están presentes y deja de generarlos. Limpia la caché de PrestaShop después de guardar. |
| "Cabeceras faltantes encontradas" sigue mostrando un script tras corregir el tema | Vuelve a activar Revisar cabeceras AMP (una vez) y guarda para forzar un nuevo análisis. El resultado del análisis anterior está desactualizado. |
Preguntas frecuentes
¿Necesito modificar mi módulo o tema AMP para usar esta funcionalidad?
Sí. Tu tema o módulo AMP debe invocar los tres hooks (displayAMPAdditionalHeaders, displayAMPVideosCarousel, displayAMPVideosContent) en sus plantillas de página de producto. Sin esas llamadas a hooks, el módulo no tiene forma de inyectar contenido en la página AMP. Comparte los nombres de los hooks con tu desarrollador de temas si necesitas ayuda para colocarlos.
¿Aparecerán los vídeos HTML5 o de proveedores personalizados en mis páginas AMP?
No. AMP solo admite un conjunto específico de componentes aprobados, y no existe ningún componente AMP para vídeo HTML5 genérico ni para dominios personalizados. Solo los vídeos de YouTube (<amp-youtube>) y Vimeo (<amp-vimeo>) se generan en las páginas AMP.
¿Necesito ejecutar el análisis "Revisar cabeceras AMP" cada vez que guardo la configuración?
No — ejecútalo una vez tras la configuración inicial y de nuevo solo si cambias tu tema AMP o actualizas tu módulo AMP. El resultado del análisis se almacena y se reutiliza en cada carga de página posterior hasta que fuerces un nuevo análisis.
¿Por qué no funciona la reproducción automática aunque la tenga activada?
Los navegadores móviles y las cachés AMP (como Google AMP Cache) tienen permiso según la especificación AMP para bloquear la reproducción automática a su discreción. Se trata de una restricción del navegador y la plataforma, no una limitación del módulo. Los vídeos seguirán reproduciéndose con normalidad cuando el cliente los toque.
El campo "Cabeceras faltantes encontradas" muestra "Todas las cabeceras requeridas ya están presentes" — ¿significa eso que no necesito el hook displayAMPAdditionalHeaders?
Puedes dejar el hook en su lugar — simplemente no genera nada cuando todos los scripts ya están presentes. Eliminarlo es seguro pero innecesario. Mantenerlo garantiza que el módulo pueda generar los scripts ausentes automáticamente si tu tema cambia en el futuro.