Vous consultez actuellement l'aide de la version:

Pour ajouter la fonctionnalité de média dynamique aux ressources que vous utilisez sur des sites web, vous pouvez ajouter le composant Dynamic Media ou Interactive Media directement aux pages. Pour ce faire, vous devez activer le mode Mise en page et activer les composants Dynamic Media. Vous pouvez alors 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.

Si vous utilisez AEM comme système de gestion de contenu web, vous pouvez ajouter les ressources Dynamic Media directement aux pages. Si vous utilisez un système de gestion de contenu web tiers, vous devez lier ou incorporer vos ressources. Pour obtenir un site web tiers réactif, voir Diffusion d’images optimisées pour un site réactif.

Remarque :

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 Dynamic Media ou Interactive Media à une page est identique à l’ajout d’un composant sur n’importe quelle page. Les composants Dynamic Media et Interactive Media sont décrits en détail dans les sections suivantes.

  1. Dans AEM, ouvrez la page où vous souhaitez ajouter le composant Dynamic Media ou Interactive Media.

  2. Dans le panneau de gauche, cliquez sur l’icône Composants et définissez un filtre Dynamic Media. Si aucun composant Dynamic Media n’est disponible, vous devez activer les composants Dynamic Media. Pour plus d’informations, voir Modification des modèles de page

    chlimage_1
  3. Faites glisser le composant Dynamic Media ou Interactive Media jusqu’à l’emplacement souhaité sur la page.

  4. Cliquez sur le cadre bleu autour du composant, puis sur l’icône Configuration (clé à molette).

  5. Modifiez les composants selon les besoins, puis cliquez sur la coche pour enregistrer les modifications.

Localisation des composants Dynamic Media

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.

    chlimage_1
  • Depuis le sélecteur de site, sélectionnez la page ou le groupe de pages souhaité. Appuyez ou cliquez sur Propriétés et sélectionnez l’onglet Avancé. Choisissez la langue souhaitée pour la localisation.

    Remarque :

    Notez que toutes les langues disponibles dans le menu Langue ne sont pas actuellement associées à des jetons.

Composants Dynamic Media

Les composants Dynamic Media et Interactive Media sont disponibles dans l’onglet 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.

Remarque :

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. 

chlimage_1

Composant Dynamic Media

Le composant Dynamic Media 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 supports variés et le contenu vidéo. 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.

Remarque :

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.

Vous pouvez modifier les paramètres de média dynamique ci-après en cliquant sur Modifier dans le composant, puis sur Paramètres de média dynamique.

dm-settings-image-preset

Remarque :

Par défaut, le composant d’image 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.

Paramètre prédéfini de visionneuse

Dans le menu déroulant, sélectionnez un paramètre prédéfini de visionneuse existant. 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 permettent de modifier les visionneuses comme indiqué dans le Guide de référence des visionneuses (Viewers Reference Guide). 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 légende/sous-titre à la vidéo.

Paramètre prédéfini d’image

Dans le menu déroulant, sélectionnez un paramètre prédéfini d’image existant. Si le paramètre prédéfini d’image 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 les sections Paramètres prédéfinis d’image et Command reference (Référence de commande).

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 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 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 d’une 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 supports variés.

URL, Ouvrir dans

Vous pouvez définir l’ouverture d’un lien à partir d’une ressource. Définissez l’URL, puis dans Ouvrir dans, indiquez si vous souhaitez que la ressource s’ouvre dans la même fenêtre ou dans une nouvelle.

Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360 ° ou de supports variés.

Largeur et hauteur

Si vous souhaitez que la taille de l’image soit fixe, saisissez une valeur en pixels. 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.

chlimage_1

Vous pouvez modifier les paramètres de média dynamique ci-après en cliquant sur Modifier dans le composant.

Remarque :

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.

Paramètre prédéfini de visionneuse

Dans le menu déroulant, sélectionnez un paramètre prédéfini de vidéo existant. 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 d’Adobe (Adobe Viewers Reference Guide). Un exemple de modificateur de visionneuse est posterimage=img.jpg&caption=text.vtt,1

Avec les modificateurs de visionneuse, vous pouvez, par exemple, effectuer les opérations suivantes :

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

Utilisation du 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.

dm-settings-smart-crop

Vous pouvez modifier le paramètre Dynamic Media suivant en cliquant sur Modifier dans le composant.

Remarque :

Par défaut, le composant d’image 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.

Modificateurs d’image

Vous pouvez appliquer des effets d’image en fournissant des commandes d’image supplémentaires. Ces commandes sont décrites dans les sections Paramètres prédéfinis d’image et Command reference (Référence de commande).

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 d’une 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 supports variés.

URL, Ouvrir dans

Vous pouvez définir l’ouverture d’un lien à partir d’une ressource. Définissez l’URL, puis dans Ouvrir dans, indiquez si vous souhaitez que la ressource s’ouvre dans la même fenêtre ou dans une nouvelle.

Cette option n’est pas disponible si vous affichez des visionneuses d’images, à 360 ° ou de supports variés.

Hauteur, largeur

Si vous souhaitez que la taille de l’image avec recadrage intelligent soit fixe, saisissez une valeur en pixels. Si vous ne fournissez pas de valeurs, la vidéo devient adaptative.

Composant Interactive Media

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 dynamique : il propose des options différentes 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 d’écran. Toutes les visionneuses sont des visionneuses HTML5.

chlimage_1

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 visionneuse

Dans le menu déroulant, sélectionnez un paramètre prédéfini de visionneuse existant. 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 les ressources 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ésactivez la case pour ne pas afficher la ressource de produit.

Afficher le prix des produits

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.

Composant de média panoramique

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 ».

panoramic-media-viewer-preset

Vous pouvez modifier le paramètre suivant en cliquant sur Configurer dans le composant.

Paramètre prédéfini de la visionneuse

Sélectionnez une visionneuse 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 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 mis à jour qui améliore le mode de communication entre les navigateurs et les serveurs. 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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne