Show Menu
SUJETS×

Ajout de ressources Dynamic Media aux pages

To add the dynamic media functionality to assets you use on your websites, you can add the Dynamic Media or Interactive Media component directly on the 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 dynamiques : ils détectent si vous ajoutez une image ou une vidéo et les options disponibles changent en conséquence.
Vous pouvez ajouter directement des ressources multimédias dynamiques à la page si vous utilisez AEM en tant que WCM. 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 .
Vous devez publier les ressources avant de les ajouter aux pages d’AEM. Voir Publication de ressources Dynamic Media .

Ajout d’un composant Dynamic Media à une page

L’ajout d’un composant Contenu multimédia dynamique à une page équivaut à l’ajout d’un composant à une page. Les composants Contenu multimédia dynamique sont décrits en détail dans les sections suivantes.
S’il existe un composant Contenu multimédia dynamique sur une page Web accessible par un utilisateur disposant d’autorisations en lecture seule, les sauts de page et les composants ne s’affichent pas correctement. La raison en est que la page est reconstruite pour s’assurer que les propriétés des composants sont correctes et que les ressources et configurations référencées sont accessibles. La page est alors rendue à nouveau, ce qui entraîne la coupure des composants ; le code de composant correspondant sur la page ne peut pas être rendu à nouveau en raison de l’accès en lecture seule de l’utilisateur.
Pour éviter ce problème, assurez-vous que les utilisateurs des sites AEM disposent des autorisations nécessaires pour accéder aux ressources.
  1. Dans AEM, ouvrez la page où vous souhaitez ajouter le composant Dynamic Media.
  2. Dans le panneau situé à gauche de la page (vous devrez peut-être activer/désactiver l’affichage du panneau latéral), cliquez sur l’icône Composants .
  3. Sous l’en-tête Composants , dans la liste déroulante, sélectionnez Contenu multimédia ​dynamique. Si aucune liste de composants Contenu multimédia dynamique n’est disponible, vous devrez probablement activer les composants Contenu multimédia dynamique que vous souhaitez utiliser. See Enabling Dynamic Media components .
  4. Faites glisser un composant Contenu multimédia dynamique que vous souhaitez utiliser sur la page à l’emplacement de votre choix.
  5. 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).
  6. Modifiez les composants selon vos besoins et cochez la case pour enregistrer les modifications.

Enabling Dynamic Media components

Si aucun composant Contenu multimédia dynamique n’est disponible pour l’ajout à une page, cela signifie probablement que vous devez d’abord activer les composants que vous souhaitez utiliser.
  1. Dans AEM, ouvrez la page où vous souhaitez ajouter le composant Dynamic Media.
  2. Dans la partie gauche de la barre d’outils située en haut de la page, appuyez sur l’icône Informations sur la page, puis sur Modifier le modèle dans la liste déroulante.
  3. Sur le côté droit de la barre d’outils près du haut de la page, dans la liste déroulante, appuyez sur Structure .
  4. Près du bas de la page, appuyez sur Conteneur de mise en page pour ouvrir sa barre d’outils, puis appuyez sur l’icône Stratégie.
  5. Sur la page Conteneur de mise en page, sous l’en-tête Propriétés , assurez-vous que l’onglet Composants ​autorisés est sélectionné.
  6. Faites défiler l’écran jusqu’à ce que vous voyiez Contenu multimédia dynamique.
  7. Appuyez sur l’icône > située à gauche de Contenu multimédia ​dynamique pour développer la liste, puis sélectionnez les composants Contenu multimédia dynamique à activer.
  8. Près du coin supérieur droit de la page Conteneur de mise en page, appuyez sur l’icône Terminé (coche).
  9. Sur le côté droit de la barre d’outils en haut de la page, dans la liste déroulante, appuyez sur Contenu ​initial, puis ajoutez un composant Contenu multimédia dynamique à une page comme d’habitude.

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.
    Notez que toutes les langues disponibles dans le menu Langue ne sont pas actuellement associées à des jetons.

Dynamic Media components

Dynamic Media and Interactive Media are available under the Dynamic Media tab in Components. Vous utilisez le composant Interactive Media] pour toutes les ressources interactives, telles que les vidéos interactives, les images interactives ou les visionneuses de carrousel. Pour tous les autres composants Dynamic Media, utilisez le composant Dynamic Media.
Ces composants ne sont pas disponibles par défaut et doivent être rendus disponibles via l’éditeur de modèles avant utilisation. Une fois les composants disponibles dans l’éditeur de modèles , vous pouvez les ajouter à votre page comme vous le feriez avec tout autre composant AEM.

Composant Dynamic Media

Le composant Contenu multimédia dynamique est intelligent ; selon que vous ajoutez une image ou une vidéo, vous disposez de différentes options. 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, le lecteur est réactif. Autrement dit, la taille de l’écran change automatiquement en fonction de la taille de l’écran. Toutes les visionneuses sont des visionneuses HTML5.
S’il existe un composant Contenu multimédia dynamique, un composant Contenu multimédia interactif ou les deux sur une page Web accessible par un utilisateur disposant d’autorisations en lecture seule, les sauts de page et les composants ne sont pas rendus correctement. La raison en est que la page est reconstruite pour s’assurer que les propriétés des composants sont correctes et que les ressources et configurations référencées sont accessibles. La page est alors rendue à nouveau, ce qui entraîne la coupure des composants ; le code de composant correspondant sur la page ne peut pas être rendu à nouveau en raison de l’accès en lecture seule de l’utilisateur.
Pour éviter ce problème, assurez-vous que les utilisateurs des sites AEM disposent des autorisations nécessaires pour accéder aux ressources.
Si vous ajoutez le composant Dynamic Media et si l’option Paramètres de média dynamique est vide ou s’il est impossible d’ajouter correctement une ressource, vérifiez les points suivants :
  • Vous avez activé Dynamic Media . Par défaut, ce module complémentaire est désactivé.
  • L’image possède un fichier pyramid tiff. Les images importées avant l’activation de Dynamic Media ne possèdent pas de fichier pyramid tiff.

En cas d’utilisation d’images

Le composant Dynamic Media 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 prédéfini d’image réactive.
You must edit the following Dynamic Media Settings by clicking the Edit icon in the component and then Dynamic Media Settings .
Par défaut, le composant d’image Dynamic Media est adaptatif. If you want to make it a fixed size, set it in the component in the Advanced tab with the Width and Height settings.
  • Paramètre prédéfini ​de la visionneuse Sélectionnez un paramètre prédéfini 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. Si vous utilisez un paramètre prédéfini d’image, vous ne pouvez pas sélectionner de paramètre prédéfini de visionneuse, et inversement. Il s’agit de la seule option disponible si vous affichez des visionneuses d’images, à 360° ou de supports variés. Les paramètres prédéfinis de visionneuse sont également dynamiques : seuls les paramètres pertinents s’affichent.
  • Modificateurs de visionneuse Les modificateurs de visionneuse prennent la forme d’une paire nom=valeur avec un délimiteur & et vous permettent de modifier les visionneuses comme l’indique 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 vidéo et associe un fichier de sous-titre/sous-titre fermé à 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. Si vous utilisez un paramètre prédéfini d’image, vous ne pouvez pas sélectionner de paramètre prédéfini de visionneuse, et inversement. Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de supports variés.
  • 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 supports variés.
  • Points d’arrêt ​Si vous utilisez ce fichier 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 supports variés. 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.
  • Alt Text ​Ajouter titre de l’image pour les utilisateurs dont les graphiques sont désactivés. Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de supports variés.
  • URL, Ouvrir dans ​Vous pouvez définir un fichier 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 supports variés.
  • Largeur et Hauteur Saisissez la valeur en pixels si vous souhaitez que l’image soit d’une taille fixe. Si vous ne fournissez pas de valeurs, la ressource devient adaptative.

En cas d’utilisation de vidéos

Le composant Dynamic Media 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.
You must edit the following Dynamic Media Settings by clicking Edit in the component.
Par défaut le composant vidéo Dynamic Media est adaptatif. Si vous souhaitez lui donner une taille fixe, définissez-la sous l’onglet Avancé du composant, grâce aux options Largeur et Hauteur.
You can edit the following Advanced Settings by clicking Edit in the component.
  • Titre Modifiez le titre de la vidéo.
  • Largeur et Hauteur Saisissez une valeur en pixels si vous souhaitez que la vidéo soit d’une taille fixe. Si vous ne fournissez pas de valeurs, la vidéo devient adaptative.

Lorsque vous utilisez le recadrage intelligent

Utilisez le composant Dynamic Media 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 .
You can edit the following Dynamic Media Settings by clicking Edit in the component.
Par défaut, le composant d’image Dynamic Media est adaptatif. Si vous souhaitez faire en sorte qu’il ait une taille fixe, définissez-la dans le composant de l’onglet Avancé à l’aide des options Largeur et Hauteur .
  • 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 supports variés.
You can edit the following Advanced settings by clicking Edit in the component.
  • Titre Modifiez le titre de l’image de recadrage dynamique.
  • Alt Text ​Ajouter titre de l’image de recadrage dynamique pour les utilisateurs dont les graphiques sont désactivés. Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360° ou de supports variés.
  • URL, Ouvrir dans ​Vous pouvez définir un fichier 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 supports variés.
  • [ ! UICONTROL Height and Width Saisissez une valeur en pixels si vous souhaitez que l’image de recadrage dynamique ait une taille fixe. Si vous ne fournissez pas de valeurs, la vidéo devient adaptative.

Interactive Media component

Le composant Interactive Media est destiné aux ressources présentant des éléments interactifs tels que des zones réactives ou des 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 intelligent. Selon que vous ajoutez une image ou une vidéo, vous disposez de différentes options. En outre, la visionneuse est réactive : la taille de l’écran change automatiquement en fonction de la taille d’écran. Toutes les visionneuses sont des visionneuses HTML5.
S’il existe un composant Contenu multimédia dynamique, un composant Contenu multimédia interactif ou les deux sur une page Web accessible par un utilisateur disposant d’autorisations en lecture seule, les sauts de page et les composants ne sont pas rendus correctement. La raison en est que la page est reconstruite pour s’assurer que les propriétés des composants sont correctes et que les ressources et configurations référencées sont accessibles. La page est alors rendue à nouveau, ce qui entraîne la coupure des composants ; le code de composant correspondant sur la page ne peut pas être rendu à nouveau en raison de l’accès en lecture seule de l’utilisateur.
Pour éviter ce problème, assurez-vous que les utilisateurs des sites AEM disposent des autorisations nécessaires pour accéder aux ressources.
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 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 Saisissez une valeur en pixels si vous souhaitez que la vidéo soit d’une taille fixe. 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 le fichier du 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ésactivez 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’élément tel qu’il est défini dans le module Commerce. Désactivez 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 contient toutes les variantes de produit, telles que la taille et la couleur. Désactivez la case pour ne pas afficher les variantes de produit.

Panoramic Media component

Le composant de média panoramique est destiné aux ressources qui sont des images panoramiques sphériques. Ces images fournissent une expérience d’affichage à 360° d’une pièce, d’une propriété, d’un lieu ou d’un paysage. Pour qu’une image soit un panorama sphérique, elle doit posséder l’une ou l’autre des propriétés suivantes, ou les deux :
  • Un rapport d’aspect de 2:1.
  • Balisée avec les mots-clés « équirectangulaire » ou (« sphérique » + « panorama ») ou (« sphérique » + « panoramique »). Voir Utilisation des balises .
Les critères de rapport d’aspect et de mots-clés s’appliquent tous deux aux ressources panoramiques pour la page des détails des ressources et le composant WCM « médias panoramiques ».
Vous pouvez modifier le paramètre suivant en appuyant sur Modifier dans le composant.
  • Paramètre prédéfini de visionneuse Sélectionnez une visionneuse existante dans le menu déroulant Paramètre prédéfini de 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 la visionneuse avant que vous puissiez les utiliser. Voir Gestion des paramètres prédéfinis de visionneuse .

Utilisation de HTTP/2 pour la diffusion de ressources Dynamic Media

HTTP/2 est le nouveau protocole web qui améliore la manière dont les serveurs et les navigateurs communiquent. Il permet un transfert rapide d’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 HTTP/2 pour tout savoir sur l’utilisation du protocole HTTP/2 avec votre compte Dynamic Media.