Utiliser la vidéo

Liens en vedette

1. Documentation Company XYZ sur les paramètres vidéo
2. Documentation Company XYZ sur les paramètres d’arrière-plan de section
3. Documentation Shopify sur l’importation et la gestion des fichiers
4. Documentation Shopify sur l’ajout de contenus multimédias aux produits
5. Documentation Shopify sur l’accessibilité des thèmes

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Align prend en charge la vidéo dans les zones multimédias autonomes, les arrière-plans de sections et de bannières, les galeries de produits, les diaporamas, les promotions de navigation et les mises en page à contenu mixte. La plupart des emplacements utilisent les mêmes commandes principales pour la source vidéo, le cadrage, la lecture, les images d’aperçu et les superpositions, même si les libellés des paramètres peuvent varier selon le contexte.

Utilisez ce guide pour préparer vos vidéos et choisir des paramètres adaptés dans votre boutique Shopify. Pour plus de détails sur les paramètres, consultez Paramètres vidéo et Paramètres d’arrière-plan de section.

Choisir une source vidéo

La plupart des zones vidéo Align prennent en charge l’un des trois types de sources suivants.

1. Vidéo hébergée par Shopify
   1. Importez ou sélectionnez un fichier dans les fichiers de votre boutique Shopify.
   2. Utilisez cette option lorsque vous avez besoin de contrôler l’encodage, la lecture en boucle, la taille du fichier ou la lecture de type arrière-plan.
   3. Une vidéo hébergée est requise pour les traitements en vidéo d’arrière-plan de section, de bannière et de hero.
2. YouTube
   1. Collez l’URL de la page vidéo, et non le code d’intégration.
   2. Utilisez YouTube lorsque la vidéo y est déjà hébergée et que l’hébergement du fournisseur répond à vos besoins.
3. Vimeo
   1. Collez l’URL de la page vidéo, et non le code d’intégration.
   2. Utilisez Vimeo lorsque la vidéo y est déjà hébergée et que l’hébergement du fournisseur répond à vos besoins.

Pour connaître les étapes d’importation de fichiers, consultez la documentation Shopify sur l’importation et la gestion des fichiers

Utilisez une seule source prévue pour chaque zone vidéo. Si un fichier hébergé et une URL de service sont tous deux disponibles, le fichier hébergé est prioritaire. Supprimez la source inutilisée pour éviter toute ambiguïté. Les modifications apportées aux vidéos externes peuvent devoir être enregistrées avant que l’aperçu de l’éditeur de thème Shopify corresponde à la boutique en ligne.

Astuce

Les vidéos externes chargent d’abord l’image d’aperçu. Le lecteur complet se charge uniquement après une interaction ou lorsqu’une vidéo en lecture automatique devient visible.

Préparer les fichiers vidéo hébergés

Le poids du fichier influe directement sur le temps de chargement, en particulier sur mobile. Shopify diffuse les vidéos hébergées avec une diffusion adaptative (HLS), mais un encodage à débit binaire inférieur peut tout de même améliorer PageSpeed et les performances perçues. Des fichiers sources plus petits restent importants même lorsque la diffusion en continu est disponible.

Comprendre le débit binaire

Le débit binaire correspond à la quantité de données vidéo encodées chaque seconde.

1. Un débit binaire élevé offre des mouvements et des détails plus nets, mais produit des fichiers plus volumineux et alourdit la page.
2. Un débit binaire faible produit des fichiers plus légers qui démarrent plus rapidement, mais peut réduire les détails dans les scènes rapides ou sombres.

La plupart des encodeurs affichent le débit binaire en kbps ou en Mbps. Considérez-le comme un compromis entre qualité visuelle et performances, plutôt que comme un simple réglage de qualité maximale.

Commencer avec ces objectifs d’encodage

1. Utilisation générale — Utilisez environ 2500 kbps pour les vidéos autonomes, les clips hero, les contenus multimédias de produits et les arrière-plans de sections pleine largeur.
2. Emplacements petits ou compacts — Utilisez environ 1000–1500 kbps pour les promotions de menu, les bannières de recherche, les contenus multimédias de pied de page, les vignettes de collage et les autres cadres étroits.
3. Clips d’arrière-plan et d’ambiance — Gardez des fichiers courts, faciles à lire en boucle et visuellement simples. Ces vidéos sont généralement lues automatiquement sans son et doivent rester légères plutôt que cinématographiques.

Adaptez la résolution à la taille d’affichage de la vidéo. Une source principale en 1080p ou 4K affichée dans une petite bannière consomme de la bande passante sans améliorer le résultat visible.

Les surfaces en lecture automatique, notamment les arrière-plans, les vidéos de diaporama et les clips hero mis en avant, sont particulièrement sensibles aux performances. Utilisez des clips courts, une lecture sans son et des débits binaires modérés.

Utiliser la vidéo dans différents emplacements

Les mêmes concepts vidéo s’appliquent à de nombreux emplacements de l’éditeur Align. Ces groupes décrivent des rôles courants plutôt que chaque section individuelle.

1. Zones vidéo autonomes
   1. Comprend les sections vidéo dédiées et les blocs vidéo dans les mises en page mixtes.
   2. Prend en charge les sources hébergées, YouTube et Vimeo.
   3. Convient aux démonstrations, aux récits de marque, aux vidéos explicatives et aux contenus éditoriaux avec légendes et boutons facultatifs.
2. Arrière-plans de sections et de bannières
   1. Ajoute un mouvement décoratif derrière les titres, les bannières, les zones hero et les contenus promotionnels.
   2. Utilise uniquement des fichiers hébergés.
   3. Est généralement lu automatiquement sans son, en boucle, avec les commandes masquées.
   4. Peut prendre en charge des fichiers d’arrière-plan distincts pour ordinateur et mobile lorsque les tailles d’écran nécessitent un cadrage différent.
3. Images de produits
   1. Comprend les vidéos de galerie de produits sur les pages de produits et dans les zones de produits mis en avant.
   2. Peut inclure une vidéo facultative au survol sur les cartes de produits lorsque le contenu multimédia au survol est activé.
   3. Les images d’aperçu et les commandes de lecture sont particulièrement utiles ici, car les acheteurs s’attendent à une lecture délibérée.
4. Contenus multimédias de diaporama et de carrousel
   1. Une vidéo peut remplacer ou supplanter les images d’une diapositive.
   2. Les clips sont généralement lus automatiquement lorsque leur diapositive devient active. Gardez-les donc assez courts pour s’intégrer naturellement à la séquence.
5. Surfaces promotionnelles compactes
   1. Comprend les petits emplacements de type bannière dans la navigation, la recherche et les autres zones denses.
   2. Ces emplacements sont les plus sensibles aux débits binaires élevés et aux fichiers volumineux.

Pour connaître les étapes d’importation de vidéos de galerie de produits et les types de contenus multimédias pris en charge, consultez la documentation Shopify sur l’ajout de contenus multimédias aux produits

Lorsqu’une vidéo semble trop lourde, vérifiez d’abord son emplacement. Un fichier qui fonctionne bien dans une zone hero pleine largeur peut rester trop volumineux pour une bannière de menu ou un cadre de la taille d’une carte.

Configurer la lecture

Ces commandes apparaissent dans les sections vidéo, les blocs vidéo et les autres surfaces Align pilotées par des contenus multimédias.

1. Lecture automatique
   1. Commence la lecture lorsque la vidéo entre dans la zone visible et la met en pause lorsqu’elle en sort.
   2. Convient particulièrement aux clips d’ambiance courts qui complètent le contenu voisin.
   3. Nécessite une lecture sans son dans l’utilisation normale de la boutique en ligne.
2. Boucle
   1. Répète le clip en continu.
   2. Fonctionne bien pour les arrière-plans et les accents animés courts, mais peut détourner l’attention d’une vidéo racontée ou narrative.
3. Désactiver le son
   1. Maintient le son désactivé jusqu’à ce que l’acheteur l’active à l’aide des commandes du lecteur.
   2. Les vidéos en lecture automatique sont désactivées par défaut.
4. Afficher les commandes du lecteur vidéo
   1. Affiche les commandes natives ou celles du fournisseur pour la lecture, la pause, la navigation, le volume et le plein écran lorsque ces fonctions sont prises en charge.
   2. Gardez les commandes visibles pour les vidéos explicatives, les démonstrations et les vidéos que les acheteurs peuvent vouloir revoir ou examiner attentivement.
   3. Vous pouvez masquer les commandes pour les clips décoratifs. Sur de nombreuses surfaces, les interactions au clic et au clavier restent fonctionnelles lorsque les commandes sont masquées.

Note

Si une vidéo dépend de détails parlés, désactivez la lecture automatique et gardez les commandes visibles afin que les acheteurs puissent choisir quand l’écouter.

Définir les images d’aperçu, le format et la largeur

1. Image d’aperçu
   1. Fournit une image de prévisualisation facultative avant le début de la lecture.
   2. Elle est particulièrement utile pour les vidéos hébergées et pour soigner la première impression.
   3. Les vidéos externes utilisent les miniatures du fournisseur lorsqu’aucune image d’aperçu personnalisée n’est définie.
2. Format d’image
   1. Contrôle la forme du cadre visible sur ordinateur et, lorsque cette fonction est disponible, sur mobile.
   2. Utilisez Default lorsque les dimensions de la source conviennent déjà à la mise en page.
   3. Définissez un format mobile distinct uniquement lorsque les téléphones nécessitent un cadrage différent.
3. Largeur maximale
   1. Empêche une vidéo de s’étendre au-delà de la largeur souhaitée dans une zone de contenu.
   2. Une valeur de 0 utilise toute la largeur disponible.

Choisissez une image d’aperçu qui correspond étroitement au cadrage de la vidéo. La transition est ainsi plus fluide lorsque la lecture commence.

Ajouter des superpositions et une lecture sans commandes

De nombreuses zones vidéo prennent en charge une superposition de couleur ou de dégradé ainsi qu’un paramètre Style de superposition.

1. Afficher lorsque la vidéo est en pause
   1. Affiche la superposition avant la lecture et après la mise en pause par un acheteur.
   2. Préserve la netteté visuelle pendant la lecture.
   3. Les pauses automatiques liées à la fenêtre d’affichage sur les vidéos en lecture automatique ne sont pas considérées comme des pauses effectuées par l’acheteur.
   4. Il s’agit du réglage par défaut de nombreuses surfaces vidéo.
2. Toujours afficher
   1. Maintient la superposition visible sur l’image d’aperçu et sur la vidéo en lecture.
   2. Utilisez-le lorsque la teinte fait partie du design, par exemple pour un traitement éditorial ou associé à la marque.
   3. Cette option désactive les commandes, quel que soit le réglage Afficher les commandes du lecteur vidéo.

Lorsque les commandes sont masquées, de nombreuses vidéos hébergées et Vimeo peuvent tout de même démarrer depuis l’image d’aperçu, puis être mises en pause ou relancées par un clic ou une interaction au clavier. YouTube conserve son propre bouton de lecture fourni par le service au lieu d’ajouter une seconde icône de lecture au thème.

Utilisez des superpositions offrant un contraste élevé avec le texte. Consultez les Paramètres d’arrière-plan de section lorsque la vidéo apparaît derrière des titres, des boutons ou du texte courant. Pour des conseils plus généraux, consultez la documentation Shopify sur l’accessibilité des thèmes

Comprendre le comportement intégré en matière de performances

Align contribue à préserver la qualité des vidéos sans charger immédiatement chaque lecteur.

1. Chargement de l’image d’aperçu en premier
   1. Les vidéos externes affichent une image d’aperçu avant la création du lecteur actif.
   2. Les vidéos qui ne sont pas en lecture automatique attendent une interaction avant de charger l’intégration complète.
2. Lecture automatique adaptée à la fenêtre d’affichage
   1. Dans la mesure du possible, les lecteurs en lecture automatique attendent que la vidéo entre dans la zone visible avant d’être créés.
   2. La lecture automatique s’interrompt lorsque la vidéo sort de la zone visible.
3. Réglages par défaut plus légers pour les vidéos hébergées
   1. Les vidéos hébergées qui ne sont pas en lecture automatique évitent le préchargement immédiat.
   2. Les vidéos d’arrière-plan retardent le chargement de la source lorsque cela est approprié et utilisent des images d’aperçu lorsque celles-ci sont disponibles.
4. Actualisations fiables
   1. Le comportement vidéo est réinitialisé après les actualisations de grille et les rechargements de l’éditeur, ce qui évite les lecteurs obsolètes après les mises à jour.
5. Coordination des cartes de produits
   1. Lorsqu’une carte de produit possède à la fois une vidéo principale et une vidéo au survol, un seul clip est lu à la fois.

Ces comportements sont automatiques. Vos principaux leviers de performance sont le poids du fichier, l’emplacement, le choix de la lecture automatique et la durée du clip.

Exemples de scénarios

1. Boucle d’arrière-plan hero
   1. Utilisez un clip d’ambiance hébergé de 6 à 10 secondes, encodé à environ 2500 kbps ou moins.
   2. Gardez-le sans son et en boucle, renforcez la superposition pour le texte et ajoutez un fichier spécifique au mobile uniquement si le cadrage sur ordinateur ne convient pas aux téléphones.
2. Vidéo de démonstration de produit
   1. Utilisez une vidéo hébergée ou une URL de service avec les commandes visibles, la lecture automatique désactivée et une image d’aperçu personnalisée.
   2. Choisissez un format paysage ou par défaut adapté à la mise en page de la galerie.
3. Bannière promotionnelle de navigation
   1. Utilisez un clip hébergé compact, encodé à environ 1000–1500 kbps.
   2. Gardez les mouvements simples, évitez la narration et vérifiez les performances sur mobile, car le cadre visible est petit.
4. Vidéo éditoriale teintée
   1. Utilisez le style de superposition Toujours afficher lorsqu’un voile coloré fait partie du design.
   2. Gardez le clip court et vérifiez que le contraste du texte reste élevé pendant la lecture.
5. Vidéo explicative externe
   1. Utilisez une URL de page YouTube ou Vimeo avec la lecture automatique désactivée, les commandes activées et une image d’aperçu personnalisée si le cadrage de la miniature par défaut n’est pas adapté.
   2. Laissez le chargement de l’image d’aperçu en premier soutenir les performances pendant que les acheteurs décident de lancer la lecture.

Notes d’utilisation

1. Encodez avant l’importation. Le débit binaire et la résolution comptent davantage que le recours à la diffusion en continu seule.
2. Utilisez des fichiers hébergés pour les arrière-plans. YouTube et Vimeo conviennent aux contenus multimédias autonomes et basés sur des blocs, mais pas aux traitements d’arrière-plan décoratifs.
3. Gardez les arrière-plans animés courts. Les vidéos d’arrière-plan et de diaporama doivent communiquer clairement sans son ni solliciter excessivement l’attention.
4. Vérifiez séparément l’affichage mobile. Les fichiers d’arrière-plan, les formats d’image et les superpositions peuvent se comporter différemment sur les petits écrans.
5. Prévisualisez après l’enregistrement. Les modifications apportées aux vidéos externes peuvent ne pas apparaître complètement dans l’éditeur tant que vous n’avez pas enregistré et consulté la boutique en ligne.