HTML5 & Fournisseurs personnalisés
Lisez des fichiers vidéo auto-hébergés directement sur votre boutique et ajoutez la prise en charge de n'importe quelle plateforme vidéo tierce au-delà de YouTube et Vimeo.
Disponible depuis la v3.0.0
Vue d'ensemble
Product Video prend en charge deux sources vidéo supplémentaires qui vont au-delà des intégrations YouTube et Vimeo natives :
Les vidéos HTML5 vous permettent de lier directement des fichiers .mp4, .webm ou .ogg hébergés n'importe où accessible par un navigateur — votre propre serveur, un CDN, ou n'importe quelle URL de fichier publique. Le navigateur gère la lecture nativement via son lecteur <video> intégré, sans JavaScript tiers requis.
Les fournisseurs personnalisés vous permettent d'intégrer des vidéos depuis n'importe quelle plateforme ou CDN acceptant une URL d'intégration. Vous enregistrez le fournisseur une seule fois — en lui donnant un nom, son domaine et un type (fichier HTML5 ou intégration iframe) — et à partir de ce moment, le module reconnaît les URL de ce domaine et les intègre correctement sur n'importe quel produit.
Les deux types de sources s'intègrent pleinement avec les emplacements d'affichage du module (galerie d'images, panneau latéral, onglets, listes de produits) et avec vos contrôles de permissions existants, tels que la restriction de lecture aux clients connectés ou à des groupes de clients spécifiques.
Configuration
Paramètres HTML5
Accédez à Modules > Gestionnaire de modules > Product Video > Configurer, puis ouvrez l'onglet Paramètres HTML5.
Tous les paramètres de cet onglet s'appliquent uniquement aux fichiers vidéo HTML5. YouTube et Vimeo ne sont pas concernés.
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| Taille de couverture vidéo | N'importe quel préréglage de taille d'image défini dans votre thème | medium | La taille d'image produit utilisée comme image d'affiche affichée avant la lecture de la vidéo. Choisissez la taille correspondant à l'image principale du produit dans votre thème (souvent large ou home_default). |
| Lecture automatique au chargement | Activé / Désactivé | Activé | Démarre la lecture automatiquement dès que le lecteur s'affiche sur la page. |
| Afficher les contrôles vidéo | Activé / Désactivé | Activé | Affiche la barre de contrôle native du navigateur — lecture, pause, défilement, volume et plein écran. |
| Lire les vidéos en sourdine | Activé / Désactivé | Désactivé | Lit sans son par défaut. La plupart des navigateurs exigent l'audio en sourdine pour que la lecture automatique fonctionne. |
| Lecture en boucle | Activé / Désactivé | Activé | Redémarre la vidéo depuis le début lorsqu'elle se termine. |
Si vous activez Lecture automatique, vous devez également activer Lire les vidéos en sourdine. Les navigateurs modernes bloquent la lecture automatique avec son, sauf si la vidéo est en sourdine.
Fournisseurs personnalisés
Les fournisseurs personnalisés sont gérés depuis une page dédiée du Back Office, séparée de la configuration principale du module.
Accédez à Catalogue > Fournisseurs vidéo dans la barre latérale du Back Office. Cette page liste tous les fournisseurs enregistrés, y compris les entrées YouTube et Vimeo natives.
Cliquez sur Ajouter un nouveau fournisseur pour ouvrir le formulaire du fournisseur.
| Champ | Obligatoire | Description |
|---|---|---|
| Nom du fournisseur | Oui | Un libellé que vous choisissez pour votre propre référence — par exemple "Wistia", "Dailymotion" ou "Mon CDN". Les clients ne voient jamais ce nom. |
| Type de fournisseur | Oui | Vidéo HTML 5 pour les URL de fichiers vidéo directs ; Autre iframe pour les plateformes utilisant des iframes d'intégration. |
| Domaine du fournisseur | Oui | Le domaine (sans http:// ni https://) de la plateforme — par exemple fast.wistia.net ou cdn.mysite.com. Lorsque vous ajoutez une vidéo à un produit, le module compare l'URL à ce domaine pour choisir le bon fournisseur. |
| Miniature du fournisseur | Oui (à la création) | Une image miniature par défaut utilisée pour toutes les vidéos de ce fournisseur. Vous pouvez la remplacer par vidéo lors de l'ajout de vidéos à des produits individuels. |
| Couverture vidéo | Oui pour le type HTML5 | Une image de couverture par défaut (image d'affiche) utilisée avant la lecture d'une vidéo HTML5. S'applique uniquement aux fournisseurs de type HTML5. |
Ajoutez uniquement des fournisseurs iframe en lesquels vous avez confiance. Les intégrations iframe d'un fournisseur enregistré sont rendues sans filtrage supplémentaire.
Après l'enregistrement, vous êtes redirigé vers la page de détail du fournisseur où vous pouvez mettre à jour les images ou modifier le nom et le domaine. Les champs Nom du fournisseur et Domaine du fournisseur sont en lecture seule pour les entrées YouTube (ID 1) et Vimeo (ID 2) natives.
Fonctionnement
Lecture vidéo HTML5
Lorsqu'un produit dispose d'une vidéo HTML5 associée, le module affiche un élément <video> natif avec l'URL comme source. L'image d'affiche (l'image fixe affichée avant la lecture) est générée à partir de l'image du produit en utilisant le préréglage Taille de couverture vidéo que vous avez configuré. Aucun script de lecteur tiers n'est chargé — la lecture est entièrement gérée par le navigateur.
Les paramètres HTML5 (lecture automatique, contrôles, sourdine, boucle) s'appliquent à toutes les vidéos HTML5 de votre boutique, y compris les vidéos assignées via des fournisseurs personnalisés de type HTML5.
Les vidéos HTML5 peuvent également générer des microdonnées Schema.org pour le référencement. Lorsqu'un client lit une vidéo HTML5, le module capture les métadonnées vidéo et les stocke pour la sortie de données structurées. Cela nécessite le Token vidéos HTML5 disponible dans la section Microdonnées & SEO de la configuration du module.
Intégration des fournisseurs iframe
Pour les fournisseurs personnalisés de type Autre iframe, le module encapsule l'URL vidéo dans une balise <iframe> en utilisant la largeur et la hauteur de vidéo standard que vous avez configurées. L'URL saisie lors de l'assignation d'une vidéo à un produit doit être l'URL d'intégration directe — pas l'URL de la page où la vidéo apparaît.
Par exemple, pour Wistia, vous utiliseriez une URL comme https://fast.wistia.net/embed/iframe/abc123, et non l'URL de la page de visionnage https://wistia.com/....
Correspondance de domaine
Lorsque vous assignez une URL vidéo à un produit, le module compare le domaine de l'URL à tous les domaines de fournisseurs enregistrés. La première correspondance détermine quel fournisseur gère l'intégration. Si aucun fournisseur personnalisé ne correspond, le module vérifie ensuite les domaines YouTube et Vimeo, puis traite l'URL comme un fichier HTML5 ordinaire.
Images des fournisseurs
Chaque fournisseur peut avoir deux images :
- Miniature — utilisée dans la liste des fournisseurs du Back Office et comme miniature vidéo de secours pour les vidéos de ce fournisseur qui n'ont pas de miniature téléchargée individuellement.
- Couverture — utilisée comme image d'affiche pour les fournisseurs de type HTML5, si aucune couverture individuelle n'est téléchargée pour une vidéo spécifique.
Les images sont stockées en plusieurs tailles selon les types d'images configurés dans votre boutique, afin de s'afficher correctement à toutes les tailles d'affichage.
Exemples d'utilisation
Exemple : Ajouter Wistia comme fournisseur iframe
Votre équipe marketing utilise Wistia pour des démonstrations de produits de marque. Dans Catalogue > Fournisseurs vidéo, cliquez sur Ajouter un nouveau fournisseur. Définissez Nom du fournisseur sur "Wistia", Type de fournisseur sur "Autre iframe" et Domaine du fournisseur sur fast.wistia.net. Téléchargez un logo Wistia comme miniature. Enregistrez. Désormais, lorsque vous ajoutez une vidéo à un produit et collez une URL d'intégration Wistia, le module la reconnaît et affiche l'iframe automatiquement.
Exemple : Fichiers MP4 auto-hébergés sur un CDN
Votre boutique vend des logiciels avec des vidéos tutorielles stockées sur videos.yourcdn.com. Ajoutez un fournisseur personnalisé avec Type de fournisseur défini sur "Vidéo HTML5" et Domaine du fournisseur défini sur videos.yourcdn.com. Téléchargez une image de couverture représentative. Lorsque vous assignez une URL vidéo comme https://videos.yourcdn.com/tutorial-product-1.mp4 à un produit, le module affiche un lecteur <video> natif en utilisant vos paramètres HTML5 (lecture automatique, boucle, contrôles, sourdine).
Exemple : Désactiver la lecture automatique pour les vidéos de démonstration
Vous vendez des produits physiques avec des vidéos d'ambiance — vous souhaitez qu'elles se jouent en boucle silencieusement sans nécessiter de clic. Accédez aux Paramètres HTML5 et activez Lecture automatique au chargement, Lire les vidéos en sourdine et Lecture en boucle. Désactivez Afficher les contrôles vidéo si vous souhaitez un rendu épuré sans contrôles. Toutes les vidéos HTML5 de votre boutique seront désormais lues silencieusement au chargement.
Remarques importantes
- Les fournisseurs personnalisés que vous ajoutez ne peuvent pas être supprimés si des vidéos leur sont encore assignées sur des produits. Supprimez d'abord les vidéos des produits, puis supprimez le fournisseur.
- Les entrées des fournisseurs natifs YouTube (ID 1) et Vimeo (ID 2) ne peuvent être ni modifiées ni supprimées. Vous pouvez télécharger une image miniature personnalisée pour remplacer leurs miniatures générées automatiquement.
- Les miniatures des fournisseurs personnalisés ne sont pas générées automatiquement — vous devez télécharger une image lors de la création du fournisseur, ou individuellement lors de l'ajout de vidéos aux produits.
- Le comportement de la lecture automatique HTML5 dépend des paramètres du navigateur du client. Certains navigateurs outrepassent la lecture automatique en sourdine. Il s'agit d'une politique du navigateur, pas d'une limitation du module.
- Les en-têtes CORS de votre CDN vidéo doivent autoriser le domaine de votre boutique. Si votre CDN n'envoie pas l'en-tête
Access-Control-Allow-Origincorrect, la vidéo ne sera pas lue en cross-origin. Il s'agit d'un problème de configuration serveur hors du contrôle du module. - Si votre boutique fonctionne en mode multi-boutique, les fournisseurs personnalisés sont partagés entre toutes les boutiques — ils ne sont pas limités par boutique.
Dépannage
| Problème | Solution |
|---|---|
| La vidéo HTML5 ne se lit pas automatiquement | Activez Lire les vidéos en sourdine dans les Paramètres HTML5. Les navigateurs exigent l'audio en sourdine pour la lecture automatique. |
| L'image de couverture apparaît à la mauvaise taille ou est floue | Modifiez Taille de couverture vidéo pour correspondre à la taille d'image utilisée par votre thème pour l'image principale du produit (généralement large ou home_default). |
| La vidéo du fournisseur personnalisé affiche un lecteur vide ou cassé | Vérifiez que l'URL est l'URL d'intégration directe, et non l'URL de la page vidéo. Pour les fournisseurs iframe, l'URL doit être le point de terminaison intégrable fourni par votre plateforme. |
| La vidéo du fournisseur personnalisé est lue mais n'a pas de miniature | Les miniatures des fournisseurs personnalisés ne sont pas générées automatiquement. Téléchargez une image miniature sur la page de modification du fournisseur, ou téléchargez-en une par vidéo sur la page de modification du produit. |
| Le fichier vidéo sur le CDN ne se lit pas | Votre CDN doit envoyer des en-têtes CORS autorisant le domaine de votre boutique. Contactez votre fournisseur CDN pour activer Access-Control-Allow-Origin pour votre boutique. |
| Le champ domaine du fournisseur est grisé | Les fournisseurs natifs YouTube et Vimeo (IDs 1 et 2) ont des champs en lecture seule. Vous ne pouvez pas modifier leur domaine ni leur nom — uniquement leurs images miniatures. |
Foire aux questions
Puis-je utiliser des fournisseurs personnalisés en même temps que YouTube et Vimeo sur le même produit ?
Oui. Un seul produit peut avoir des vidéos provenant de n'importe quelle combinaison de fournisseurs — YouTube, Vimeo, HTML5 et tous les fournisseurs personnalisés que vous avez enregistrés. Chaque vidéo est intégrée selon les règles de son propre fournisseur.
Quelle URL dois-je coller lors de l'ajout d'une vidéo d'un fournisseur iframe à un produit ?
Utilisez l'URL d'intégration directe — celle que vous mettriez normalement dans une balise <iframe src="...">. N'utilisez pas l'URL de la page où vous regardez la vidéo. La plupart des plateformes fournissent une option dédiée « URL d'intégration » ou « partager l'intégration ». Par exemple, Wistia affiche une URL fast.wistia.net/embed/... dans ses options d'intégration.
Les vidéos HTML5 génèrent-elles des données structurées Schema.org comme YouTube et Vimeo ?
Oui, mais cela nécessite une étape supplémentaire. Activez la génération de microdonnées dans la section Microdonnées & SEO et assurez-vous que le Token vidéos HTML5 est défini. Le module capture les métadonnées vidéo lorsqu'un client lit la vidéo et les stocke pour la sortie Schema.org. Les métadonnées YouTube et Vimeo sont récupérées depuis leurs API ; les métadonnées HTML5 sont capturées via un mécanisme front-end déclenché à la première lecture.
Mes clients sur mobile verront-ils les contrôles du lecteur HTML5 ?
Le navigateur affiche les contrôles en utilisant son interface vidéo native, de sorte que l'apparence dépend du navigateur et de l'appareil du client. Sur la plupart des navigateurs mobiles, les contrôles apparaissent en superposition sur la vidéo. Vous pouvez masquer entièrement les contrôles en désactivant Afficher les contrôles vidéo dans les Paramètres HTML5 — utile pour les vidéos d'arrière-plan ou d'ambiance.
Comment supprimer un fournisseur personnalisé dont je n'ai plus besoin ?
Supprimez d'abord toutes les vidéos assignées aux produits qui utilisent ce fournisseur. Ensuite, accédez à Catalogue > Fournisseurs vidéo, ouvrez le fournisseur et supprimez-le. Si des vidéos de ce fournisseur sont encore assignées à des produits, la suppression échouera.
Puis-je remplir automatiquement le nom du fournisseur à partir du domaine ?
Si vous ouvrez le formulaire Ajouter un fournisseur sans saisir de nom mais avec un domaine déjà renseigné dans le champ domaine, le module génère automatiquement un nom de fournisseur en supprimant les suffixes courants (.com, .net, etc.) du domaine et en le mettant en majuscule. Vous pouvez modifier le nom à tout moment.