Vidéos AMP
Affiche les vidéos produit sur les Accelerated Mobile Pages (AMP) en utilisant les composants vidéo compatibles AMP, pour que vos vidéos apparaissent sur des pages mobiles à chargement rapide.
Disponible depuis la v3.0.0
Vue d'ensemble
Les pages AMP utilisent un sous-ensemble restreint de HTML — les balises standard <iframe> et <video> ne sont pas autorisées. Cette fonctionnalité génère les composants AMP appropriés (<amp-youtube>, <amp-vimeo>) et injecte les en-têtes de scripts requis afin que les vidéos fonctionnent sur les pages produit AMP sans déclencher d'erreurs de validation AMP.
Étant donné qu'AMP est fourni par un module ou un thème distinct — et non par PrestaShop lui-même — cette fonctionnalité s'appuie sur trois hooks que votre thème ou module AMP doit appeler dans ses templates. Une fois ces hooks en place et les Vidéos AMP activées, les vidéos produit de votre boutique apparaissent dans le carrousel d'images et dans la zone de contenu produit sur chaque page produit AMP.
Le module inclut également une analyse unique des en-têtes qui vérifie si les scripts de composants AMP requis sont déjà présents dans votre template AMP, afin d'éviter les erreurs de scripts dupliqués sur les pages qui chargent déjà ces scripts.
Configuration
- Accédez à Modules > Gestionnaire de modules, trouvez Product Video et cliquez sur Configurer.
- Naviguez vers l'onglet Intégration AMP.
- Activez Utiliser les vidéos AMP et ajustez les options ci-dessous.
- Cliquez sur Enregistrer.
- Après l'enregistrement, activez Analyser les en-têtes AMP (une fois) et enregistrez à nouveau — cela permet au module de détecter les balises de script AMP qu'il doit générer.
| Paramètre | Valeurs | Par défaut | Description |
|---|---|---|---|
| Utiliser les vidéos AMP | Oui / Non | Non | Interrupteur principal. Doit être activé pour tout affichage de vidéo AMP. |
| Lecture automatique dans le carrousel | Oui / Non | Oui | Tente de lancer automatiquement les vidéos dans le carrousel AMP. Les vidéos démarrent en sourdine ; le son s'active uniquement lorsque le client appuie sur la vidéo. La lecture automatique peut être bloquée sur certains appareils indépendamment de ce paramètre. |
| Afficher les contrôles de lecture | Oui / Non | Non | Affiche les contrôles de lecture natifs (lecture, pause, barre de progression) sur les composants vidéo AMP. |
| Analyser les en-têtes AMP (une fois) | Oui / Non | — | Activez une fois pour déclencher une analyse du <head> de la page AMP à la recherche de scripts de composants vidéo manquants. Le module enregistre le résultat et remet automatiquement ce commutateur sur Non. Réactivez si vous changez votre thème AMP. |
| En-têtes manquants détectés | Lecture seule | — | Indique quels scripts de composants AMP sont absents de votre template AMP, ou "Tous les en-têtes requis sont déjà présents" si rien ne manque. |
Après avoir changé de thème ou mis à jour votre module AMP, réactivez Analyser les en-têtes AMP (une fois) et enregistrez. Le résultat de l'analyse précédente peut ne plus être exact.
Placement des hooks requis
Vous-même ou le développeur de votre thème/module AMP devez ajouter trois hooks au template de la page produit AMP. Ces hooks ne sont pas appelés automatiquement — ils doivent être placés dans le code source du template.
1. Dans le <head>
{hook h='displayAMPAdditionalHeaders'}
Génère les balises <script async custom-element="..."> requises par AMP pour les composants vidéo. Placez ce hook n'importe où dans la balise <head> de votre template produit AMP. Si l'analyse Analyser les en-têtes AMP a détecté que les scripts sont déjà présents, ce hook ne génère rien afin d'éviter les doublons.
2. Dans le carrousel d'images
{hook h='displayAMPVideosCarousel'}
Génère un composant vidéo AMP par vidéo produit, dimensionné pour correspondre aux dimensions de vos images produit. Placez ce hook dans le bloc <amp-carousel> aux côtés de vos slides <amp-img>.
Ce hook ne génère des vidéos que lorsque l'emplacement d'affichage Galerie d'images est activé dans les paramètres principaux d'affichage vidéo (
PV_DISPLAY_IMG). Si vous utilisez uniquement le panneau latéral ou les modes d'affichage dans la zone de contenu, utilisezdisplayAMPVideosContentà la place.
3. Dans la zone de contenu produit
{hook h='displayAMPVideosContent'}
Génère un lecteur vidéo AMP autonome en utilisant la largeur et la hauteur configurées dans Dimensions vidéo. Placez ce hook dans le template produit à l'endroit où vous souhaitez que la vidéo apparaisse — par exemple, avant ou après la description longue.
Ce hook ne génère des vidéos que lorsque l'emplacement d'affichage Panneau latéral ou Contenu/Onglets est activé dans les paramètres principaux d'affichage vidéo.
Fonctionnement
Lorsque Utiliser les vidéos AMP est activé et qu'un client visite la page AMP d'un produit :
displayAMPAdditionalHeadersse déclenche dans le<head>. Si l'analyse Analyser les en-têtes AMP a détecté des scripts manquants, le module génère les balises<script>appropriées. Si l'analyse a trouvé tous les scripts déjà présents, ce hook ne génère rien.displayAMPVideosCarouselse déclenche dans le<amp-carousel>et génère un slide vidéo AMP par vidéo assignée au produit. Les vidéos sont dimensionnées pour correspondre au type d'image produit configuré dans vos paramètres de galerie.displayAMPVideosContentse déclenche dans la zone de contenu et génère un lecteur autonome en utilisant la largeur et la hauteur vidéo de votre configuration Dimensions vidéo.
Le module utilise <amp-youtube> pour les vidéos YouTube et <amp-vimeo> pour les vidéos Vimeo, en extrayant l'identifiant vidéo de l'URL enregistrée. La lecture automatique et les contrôles sont appliqués aux vidéos du carrousel selon vos paramètres.
Ce que fait "Analyser les en-têtes AMP"
Lorsque vous activez ce commutateur et enregistrez, le module récupère votre page produit AMP, analyse la section <head> et vérifie quels scripts de composants AMP (amp-youtube, amp-vimeo, etc.) sont déjà chargés par votre thème. Il enregistre la liste des scripts manquants dans sa configuration. À partir de ce moment, displayAMPAdditionalHeaders ne génère que les scripts manquants — pas tous — évitant ainsi les doublons. Le commutateur se remet automatiquement sur Non une fois l'analyse terminée.
Exemples d'utilisation
Exemple : Vidéos dans le carrousel d'images
Vous avez un produit avec deux vidéos YouTube et votre module AMP utilise un <amp-carousel> pour les images produit. Vous ajoutez {hook h='displayAMPVideosCarousel'} dans la balise <amp-carousel>, activez Utiliser les vidéos AMP et lancez l'analyse des en-têtes. Lorsqu'un client visite la page produit AMP, les deux vidéos apparaissent comme slides supplémentaires dans le carrousel aux côtés des photos du produit. Avec la Lecture automatique activée, le premier slide vidéo commence à jouer en sourdine dès qu'il arrive au premier plan.
Exemple : Vidéo sous la description du produit
Votre thème AMP place la description produit dans un bloc <div class="description">. Vous ajoutez {hook h='displayAMPVideosContent'} immédiatement après ce bloc et activez l'emplacement d'affichage Contenu/Onglets dans les paramètres principaux d'affichage vidéo. La vidéo Vimeo du produit apparaît désormais sous la description sur chaque page produit AMP, dimensionnée selon vos paramètres Dimensions vidéo.
Exemple : Prévention des erreurs de validation AMP
Après avoir activé les Vidéos AMP, vous constatez des erreurs de validation AMP concernant des scripts amp-youtube manquants. Vous ouvrez les paramètres d'Intégration AMP, activez Analyser les en-têtes AMP (une fois) et enregistrez. Le module analyse la page, détecte le script manquant et le génère automatiquement via displayAMPAdditionalHeaders à partir de ce moment. Les erreurs de validation disparaissent.
Remarques importantes
- AMP n'est pas inclus dans PrestaShop par défaut. Cette fonctionnalité ne fonctionne que si votre boutique dispose d'un module ou d'un thème AMP distinct qui génère des pages produit AMP et appelle les trois hooks décrits ci-dessus.
- Seuls YouTube et Vimeo sont pris en charge en mode AMP. Les vidéos HTML5 et les vidéos de fournisseurs personnalisés ne peuvent pas être rendues en tant que composants AMP et n'apparaîtront pas sur les pages AMP.
- Le hook du carrousel nécessite que l'affichage Galerie d'images soit activé. Si vous utilisez un mode d'affichage autre que Galerie d'images, utilisez
displayAMPVideosContentpour la zone de contenu à la place. - Le comportement de la lecture automatique dépend de l'appareil. La spécification AMP autorise la lecture automatique sur certaines implémentations, mais les navigateurs mobiles et les caches AMP peuvent la désactiver indépendamment de votre paramètre.
- Lancez l'analyse des en-têtes une fois après la configuration initiale, et à nouveau après tout changement de thème AMP. Sans résultat d'analyse, le module ne peut pas savoir s'il doit lui-même générer les scripts AMP, et vous risquez soit des scripts manquants, soit des doublons.
- Multi-boutique : Les paramètres Vidéos AMP sont par boutique. Chaque contexte de boutique peut activer ou désactiver indépendamment les Vidéos AMP et configurer ses options de lecture automatique et de contrôles.
Dépannage
| Problème | Solution |
|---|---|
| Aucune vidéo n'apparaît sur les pages produit AMP | Vérifiez que Utiliser les vidéos AMP est activé. Confirmez que les trois hooks sont placés dans votre template AMP. Assurez-vous que le produit dispose d'au moins une vidéo YouTube ou Vimeo assignée. |
| Le hook du carrousel n'affiche rien | Vérifiez que l'emplacement d'affichage Galerie d'images est activé dans les paramètres principaux d'affichage vidéo. Le hook displayAMPVideosCarousel ne se déclenche que lorsque cet emplacement est actif. |
| Le hook de contenu n'affiche rien | Vérifiez que l'emplacement d'affichage Panneau latéral ou Contenu/Onglets est activé dans les paramètres principaux d'affichage vidéo. |
| Erreur de validation AMP : script requis manquant | Activez Analyser les en-têtes AMP (une fois) et enregistrez. Le module détectera et mémorisera le script manquant, puis le génèrera lors des chargements de page suivants via displayAMPAdditionalHeaders. |
| Erreurs de scripts AMP en double | Lancez l'analyse Analyser les en-têtes AMP — après l'analyse, le module détecte que les scripts sont déjà présents et cesse de les générer. Videz le cache PrestaShop après l'enregistrement. |
| "En-têtes manquants détectés" affiche encore un script après correction de votre thème | Réactivez Analyser les en-têtes AMP (une fois) et enregistrez pour forcer une nouvelle analyse. L'ancien résultat d'analyse est obsolète. |
Foire aux questions
Dois-je modifier mon module ou thème AMP pour utiliser cette fonctionnalité ?
Oui. Votre thème ou module AMP doit appeler les trois hooks (displayAMPAdditionalHeaders, displayAMPVideosCarousel, displayAMPVideosContent) dans ses templates de page produit. Sans ces appels de hooks, le module n'a aucun moyen d'injecter du contenu dans la page AMP. Communiquez les noms des hooks à votre développeur de thème si vous avez besoin d'aide pour les placer.
Les vidéos HTML5 ou de fournisseurs personnalisés apparaîtront-elles sur mes pages AMP ?
Non. AMP ne prend en charge qu'un ensemble spécifique de composants approuvés, et il n'existe pas de composant AMP pour les vidéos HTML5 génériques ou les domaines personnalisés. Seules les vidéos YouTube (<amp-youtube>) et Vimeo (<amp-vimeo>) sont générées sur les pages AMP.
Dois-je lancer l'analyse "Analyser les en-têtes AMP" à chaque fois que j'enregistre des paramètres ?
Non — lancez-la une fois après la configuration initiale, et à nouveau uniquement si vous changez votre thème AMP ou mettez à jour votre module AMP. Le résultat de l'analyse est stocké et réutilisé à chaque chargement de page ultérieur jusqu'à ce que vous forciez une nouvelle analyse.
Pourquoi la lecture automatique ne fonctionne-t-elle pas même si je l'ai activée ?
Les navigateurs mobiles et les caches AMP (comme le cache AMP de Google) sont autorisés par la spécification AMP à bloquer la lecture automatique à leur discrétion. Il s'agit d'une restriction du navigateur et de la plateforme, non d'une limitation du module. Les vidéos seront lues normalement lorsque le client appuie dessus.
Le champ "En-têtes manquants détectés" affiche "Tous les en-têtes requis sont déjà présents" — cela signifie-t-il que je n'ai pas besoin du hook displayAMPAdditionalHeaders ?
Vous pouvez laisser le hook en place — il ne génère simplement rien lorsque tous les scripts sont déjà présents. Le supprimer est sans danger mais inutile. Le conserver garantit que le module peut générer automatiquement les scripts manquants si votre thème venait à changer.