Ajout de ressources Dynamic Media aux pages adding-dynamic-media-assets-to-pages
Pour ajouter la fonctionnalité Dynamic Media aux ressources que vous utilisez sur vos sites web, vous pouvez ajouter la fonction Dynamic Media ou Média interactif du composant directement sur la page. Pour ce faire, vous devez activer le mode Mise en page et activer les composants Dynamic Media. Vous pouvez ensuite ajouter ces composants à la page et ajouter des ressources au composant. Les composants Dynamic Media et Interactive Media sont intelligents : ils savent si vous ajoutez une image ou une vidéo et les options disponibles changent en conséquence.
Vous ajoutez directement des ressources Dynamic Media à la page si vous utilisez AEM comme système de gestion de contenu web. Si vous faites appel à un tiers pour votre gestion de contenu web, liez ou incorporez vos ressources. Pour un site Web tiers réactif, reportez-vous à la section Diffusion d’images optimisées sur un site réactif.
Ajout d’un composant Dynamic Media à une page adding-a-dynamic-media-component-to-a-page
L’ajout d’un composant Dynamic Media à une page est identique à l’ajout d’un composant à n’importe quelle page. Les composants Dynamic Media sont décrits en détail dans les sections suivantes.
-
Dans AEM, ouvrez la page où vous souhaitez ajouter le composant Dynamic Media.
-
Dans le panneau situé sur le côté gauche de la page (vous devrez peut-être activer/désactiver l’affichage du panneau latéral), cliquez sur le bouton Composants icône .
-
Sous l’en-tête Composants, dans la liste déroulante, sélectionnez Dynamic Media. Si aucune liste de composants Dynamic Media n’est disponible, vous devrez probablement activer ceux que vous souhaitez utiliser. Voir Activation des composants Dynamic Media.
-
Faites glisser un composant Dynamic Media que vous souhaitez utiliser sur la page à l’emplacement souhaité.
-
Placez le pointeur de la souris directement sur le composant. Lorsque le composant est entouré d’une zone bleue, appuyez une fois pour afficher la barre d’outils du composant. Appuyez sur l’icône Configuration (clé à molette).
-
Modification des composants si nécessaire, puis cliquez sur la coche pour enregistrer les modifications.
Activation des composants Dynamic Media enabling-dynamic-media-components
Si aucun composant Dynamic Media n’est disponible pour ajouter une page, cela signifie probablement que vous devez d’abord activer les composants que vous souhaitez utiliser.
-
Dans AEM, ouvrez la page où vous souhaitez ajouter le composant Dynamic Media.
-
Dans la partie gauche de la barre d’outils située en haut de la page, appuyez sur l’icône Informations de la page, puis sur Modifier le modèle dans la liste déroulante.
-
Dans la liste déroulante située sur le côté droit de la barre d’outils, à proximité du haut de la page, appuyez sur Structure.
-
À proximité du bas de la page, appuyez sur Conteneur de mises en page pour ouvrir sa barre d’outils, puis appuyez sur l’icône Stratégie.
-
Sur la page Conteneur de mises en page, sous l’en-tête Propriétés, assurez-vous que l’onglet Composants autorisés est sélectionné.
-
Faites défiler l’écran jusqu’à ce que vous voyiez Média dynamique.
-
Appuyez sur l’icône > située à gauche de Média dynamique pour développer la liste, puis sélectionnez les composants Dynamic Media à activer.
-
À proximité de l’angle supérieur droit de la page Conteneur de mises en page, appuyez sur l’icône Terminé (coche).
-
Dans la liste déroulante située sur le côté droit de la barre d’outils, en haut de la page, appuyez sur Contenu initial, puis ajoutez un composant Dynamic Media à une page comme vous le faites habituellement.
Localisation des composants Dynamic Media localizing-dynamic-media-components
Vous pouvez rechercher les composants Dynamic Media de deux façons :
-
Dans une page web de Sites, ouvrez Propriétés et sélectionnez l’onglet Avancé. Choisissez la langue souhaitée pour la localisation.
-
Depuis le sélecteur de site, sélectionnez la page ou le groupe de pages souhaité. Appuyez sur Propriétés et sélectionnez l’onglet Avancé. Choisissez la langue souhaitée pour la localisation.
note note NOTE Notez que toutes les langues disponibles dans le menu Langue ne sont pas actuellement associées à des jetons.
Composants Dynamic Media dynamic-media-components
Dynamic Media et Interactive Media sont disponibles sous Dynamic Media dans Composants. Vous utilisez le composant Interactive Media pour toutes les ressources interactives telles que du contenu vidéo interactif, des images interactives ou des ensembles de carrousels. Pour tous les autres composants Dynamic Media, utilisez le composant Dynamic Media.
Composant Dynamic Media dynamic-media-component
Le composant Média dynamique est dynamique ; il propose des options différentes selon que vous ajoutez une image ou une vidéo. Le composant prend en charge les paramètres d’image prédéfinis, ainsi que les visionneuses d’images telles que les visionneuses d’images, les visionneuses à 360°, les visionneuses de médias mixtes et le contenu vidéo. En outre, la visionneuse est réactive. En d’autres termes, la taille de l’écran change automatiquement en fonction de la taille de l’écran. Toutes les visionneuses sont des visionneuses HTML5.
- Vous avez enabled Dynamic Media. Par défaut, Dynamic Media est désactivé.
- L’image possède un fichier pyramid tiff. Les images importées avant l’activation de Dynamic Media ne comportent pas de fichier pyramid tiff.
En cas d’utilisation d’images when-working-with-images
Le composant Média dynamique permet d’ajouter des images dynamiques, notamment des visionneuses d’images, à 360 ° et de supports variés. Vous pouvez effectuer un zoom avant et arrière, faire pivoter une image dans une visionneuse à 360° ou sélectionner une image dans un autre type de visionneuse.
Vous pouvez également configurer directement dans le composant les paramètres prédéfinis de la visionneuse ou de l’image ou le format de l’image. Pour rendre une image réactive, vous pouvez définir les points d’arrêt ou appliquer un paramètre d’image prédéfini réactif.
Vous devez modifier les paramètres Dynamic Media suivants en cliquant sur le bouton Modifier dans le composant, puis Paramètres Dynamic Media.
-
Paramètre prédéfini de la visionneuse
Sélectionnez un paramètre prédéfini de visionneuse existant dans le menu déroulant. Si le paramètre prédéfini de visionneuse que vous recherchez n’est pas visible, vous devrez le rendre visible. Voir Gestion des paramètres prédéfinis de visionneuse. Vous ne pouvez pas sélectionner de paramètre prédéfini de visionneuse si vous utilisez un paramètre d’image prédéfini et vice versa.
Il s’agit de la seule option disponible si vous affichez des visionneuses d’images, à 360° ou de supports variés. Les paramètres de visionneuse prédéfinis affichés sont également intelligents ; seuls les paramètres de visionneuse prédéfinis pertinents s’affichent. -
Modificateurs de visionneuse
Les modificateurs de visionneuse prennent la forme d’une paire nom=valeur avec un délimiteur & et permettent de modifier les visionneuses comme indiqué dans le Guide de référence des visionneuses. Un exemple de modificateur de visionneuse est posterimage=img.jpg&caption=text.vtt,1 qui définit une image différente pour la miniature de la vidéo et associe un fichier de sous-titre/sous-titre à la vidéo. -
Paramètre d’image prédéfini
Sélectionnez un paramètre d’image prédéfini existant dans le menu déroulant. Si le paramètre d’image prédéfini que vous recherchez n’est pas visible, vous devrez le rendre visible. Voir Gestion des paramètres d’image prédéfinis. Vous ne pouvez pas sélectionner de paramètre prédéfini de visionneuse si vous utilisez un paramètre d’image prédéfini et vice versa.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes. -
Modificateurs d’image
Vous pouvez appliquer des effets d’image en fournissant des commandes d’image supplémentaires. Ces commandes sont décrites dans la section Paramètres prédéfinis d’image et dans le guide de référence des commandes relatives aux images.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes. -
Points d’arrêt
Si vous utilisez cette ressource sur un site réactif, vous devez ajouter les points d’arrêt d’image. Les points d’arrêt d’image doivent être séparés par des virgules (,). Cette option fonctionne lorsqu’il n’existe aucune valeur de hauteur ou largeur définie dans un paramètre d’image prédéfini.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes.
Vous pouvez modifier les paramètres avancés ci-après en cliquant sur Modifier dans le composant. -
Titre
Modifiez le titre de l’image. -
Texte de remplacement
Ajoutez un titre à l’image pour les utilisateurs pour lesquels les graphiques sont désactivés.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes. -
URL, Ouvrir dans
Vous pouvez définir une ressource pour ouvrir un lien. Définissez l’URL, puis dans le champ Ouvrir dans, indiquez si vous souhaitez l’ouvrir dans la même fenêtre ou une nouvelle fenêtre.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes. -
Largeur et Hauteur
Saisissez une valeur en pixels si vous souhaitez que la taille de l’image soit fixe. Si vous ne fournissez pas de valeurs, la ressource devient adaptative.
En cas d’utilisation de vidéos when-working-with-video
Le composant Média dynamique permet d’ajouter une vidéo dynamique à vos pages web. Lorsque vous modifiez le composant, vous pouvez choisir d’utiliser un paramètre prédéfini de la visionneuse de vidéos pour lire la vidéo sur la page.
Vous devez modifier les paramètres Dynamic Media suivants en cliquant sur Modifier dans le composant.
-
Paramètre prédéfini de la visionneuse
Sélectionnez un paramètre prédéfini de visionneuse de vidéos existant dans le menu déroulant. Si le paramètre prédéfini de visionneuse que vous recherchez n’est pas visible, vous devrez le rendre visible. Voir Gestion des paramètres prédéfinis de visionneuse. -
Modificateurs de visionneuse
Les modificateurs de visionneuse prennent la forme d’une paire nom=valeur avec un délimiteur & et permettent de modifier les visionneuses comme indiqué dans le Guide de référence des visionneuses Adobe. Un exemple de modificateur de visionneuse est posterimage=img.jpg&caption=text.vtt,1Avec les modificateurs de visionneuse, vous pouvez par exemple effectuer les opérations suivantes :
- Associer un fichier de sous-titres à une vidéo légende.
- Associer un fichier de navigation à une vidéo navigation.
Vous pouvez modifier les paramètres avancés ci-après en cliquant sur Modifier dans le composant.
-
Titre
Modifiez le titre de la vidéo. -
Largeur et Hauteur
Si vous souhaitez que la taille de la vidéo soit fixe, saisissez une valeur en pixels. Si vous ne fournissez pas de valeurs, la vidéo devient adaptative.
Lorsque vous utilisez le recadrage intelligent when-working-with-smart-crop
Utilisez le composant Média dynamique pour ajouter des ressources d’images avec recadrage intelligent à vos pages web. Lorsque vous modifiez le composant, vous pouvez choisir d’utiliser un paramètre prédéfini de la visionneuse de vidéos pour lire la vidéo sur la page.
Voir aussi Profils d’image.
Vous pouvez modifier les paramètres Dynamic Media ci-après en cliquant sur Modifier dans le composant.
- Modificateurs d’image
Vous pouvez appliquer des effets d’image en fournissant des commandes d’image supplémentaires. Ces commandes sont décrites dans la section Paramètres prédéfinis d’image et dans le guide de référence des commandes relatives aux images.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes.
Vous pouvez modifier les paramètres avancés ci-après en cliquant sur Modifier dans le composant.
-
Titre
Modifiez le titre de l’image avec recadrage intelligent. -
Texte de remplacement
Ajoutez un titre à l’image avec recadrage intelligent pour les utilisateurs pour lesquels les graphiques sont désactivés.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes. -
URL, Ouvrir dans
Vous pouvez définir une ressource pour ouvrir un lien. Définissez l’URL, puis dans le champ Ouvrir dans, indiquez si vous souhaitez l’ouvrir dans la même fenêtre ou une nouvelle fenêtre.
Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de médias mixtes. -
Hauteur et Largeur
Saisissez une valeur en pixels si vous souhaitez que la taille de l’image de recadrage intelligent soit fixe. Si vous ne fournissez pas de valeurs, la vidéo devient adaptative.
Composant Interactive Media interactive-media-component
Le composant Interactive Media est destiné aux ressources qui comportent de l’interactivité sur ces zones réactives ou zones cliquables. Si vous disposez d’une image interactive, d’une vidéo interactive ou d’une bannière de carrousel, utilisez le composant Interactive Media.
Le composant Interactive Media est dynamique. Il propose différentes options selon que vous ajoutez une image ou une vidéo. En outre, la visionneuse est réactive : la taille de l’écran change automatiquement en fonction de la taille de l’écran. Toutes les visionneuses sont des visionneuses HTML5.
Vous pouvez modifier les paramètres Général ci-après en cliquant sur Modifier dans le composant.
-
Paramètre prédéfini de la visionneuse
Sélectionnez un paramètre prédéfini de visionneuse existant dans le menu déroulant. Si le paramètre prédéfini de visionneuse que vous recherchez n’est pas visible, vous devrez le rendre visible. Les paramètres de visionneuse prédéfinis doivent être publiés avant de pouvoir être utilisés. Voir Gestion des paramètres prédéfinis de visionneuse. -
Titre
Modifiez le titre de la vidéo. -
Largeur et Hauteur
Si vous souhaitez que la taille de la vidéo soit fixe, saisissez une valeur en pixels. Si vous ne fournissez pas de valeurs, la vidéo devient adaptative.
Vous pouvez modifier les paramètres Ajouter au panier ci-après en cliquant sur Modifier dans le composant.
-
Afficher la ressource de produit
Par défaut, cette valeur est sélectionnée. La ressource de produit affiche une image du produit telle que définie dans le module Commerce. Décochez la case pour ne pas afficher la ressource de produit. -
Afficher le prix du produit
Par défaut, cette valeur est sélectionnée. Le prix du produit affiche le prix de l’article tel que défini dans le module Commerce. Décochez la case pour ne pas afficher le prix du produit. -
Afficher le formulaire de produit
Par défaut, cette valeur n’est pas sélectionnée. Le formulaire de produit comprend toutes les variantes de produit, telles que la taille et la couleur. Décochez la case pour ne pas afficher les variantes de produit.
Composant Média panoramique panoramic-media-component
Le composant Média panoramique est destiné aux ressources qui sont des images panoramiques sphériques. Ces images offrent une expérience d’affichage de 3 60° d’une pièce, d’une propriété, d’un emplacement ou d’un paysage. Pour qu’une image soit considérée comme un panorama sphérique, elle doit posséder l’une des caractéristiques suivantes, OU les deux :
- Un format de 2:1.
- Avec les mots-clés "équirectangulaire" ou ("sphérique" + "panorama") ou ("sphérique" + "panoramique"). Voir Utilisation des balises.
Les critères de format et de mot-clé s’appliquent aux ressources panoramiques pour la page de détails des ressources et le composant de gestion de contenu web « Médias panoramiques ».
Vous pouvez modifier le paramètre suivant en appuyant sur Modifier dans le composant.
- Paramètre prédéfini de la visionneuse
Sélectionnez une visionneuse existante dans le menu déroulant Paramètre prédéfini de la visionneuse .
Si le paramètre prédéfini de la visionneuse que vous recherchez n’est pas visible, vérifiez qu’il est publié. Vous devez publier les paramètres prédéfinis de visionneuse avant de pouvoir les utiliser. Consultez Gestion des paramètres prédéfinis de visionneuse.
Utilisation du HTTP/2 pour la diffusion de ressources Dynamic Media using-http-to-delivery-dynamic-media-assets
HTTP/2 est le nouveau protocole Web mis à jour qui améliore la communication entre les navigateurs et les serveurs. Il permet un transfert plus rapide des informations et réduit la puissance de traitement nécessaire. Les ressources Dynamic Media peuvent désormais être diffusées sur HTTP/2, un protocole qui garantit de meilleurs temps de réponse et de chargement.
Voir Diffusion du contenu sur HTTP2 pour tout savoir sur l’utilisation du protocole HTTP/2 avec votre compte Dynamic Media.