Ajout de ressources Dynamic Media aux pages adding-dynamic-media-assets-to-pages

CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

Pour ajouter la fonctionnalité Dynamic Media 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, saisissez Conception et activation des 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.

NOTE
Les zones cliquables sont disponibles et prêtes à l’emploi pour les bannières de carrousel.

Ajout d’un composant Dynamic Media à une page adding-a-dynamic-media-component-to-a-page

L’ajout d’un composant Dynamic Media ou Interactive Media à une page suit le même processus que 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.

Pour ajouter un composant ou une visionneuse Dynamic Media à une page, procédez comme suit :

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

  2. Si aucun composant Dynamic Media n’est disponible, cliquez sur la règle dans le Sidekick pour entrer Conception mode, cliquez sur Modifier parsys, puis sélectionnez Dynamic Media pour rendre les composants Dynamic Media disponibles.

    note note
    NOTE
    Pour plus d’informations, consultez Configuration des composants en mode Création.
  3. Retournez en mode d’édition en cliquant sur l’icône représentant un crayon dans le sidekick.

  4. Faites glisser le composant Dynamic Media ou Interactive Media du groupe Autre du sidekick jusqu’à l’emplacement souhaité sur la page.

  5. Cliquez sur Modifier pour ouvrir le composant.

  6. Modifier le composant Si nécessaire, cliquez sur OK pour enregistrer les modifications.

Composants Dynamic Media dynamic-media-components

Dynamic Media et Interactive Media sont disponibles dans le sidekick sous Dynamic Media. 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 la méthode Dynamic Media composant.

chlimage_1-71

NOTE
Ces composants ne sont pas disponibles par défaut et doivent être sélectionnés en mode de conception avant utilisation. Une fois qu’elles sont disponibles en mode de conception, vous pouvez ajouter les composants à votre page comme vous le feriez pour tout autre composant AEM.

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 basées sur le HTML5.

NOTE
Si vous ajoutez le composant Dynamic Media et si les Paramètres de Dynamic Media sont vides ou s’il est impossible d’ajouter correctement une ressource, vérifiez les points suivants :
  • 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 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 d’image prédéfini réactif.

chlimage_1-72

Vous pouvez modifier les paramètres de Dynamic Media ci-après en cliquant sur Modifier dans le composant, puis sur l’onglet Paramètres de Dynamic Media.

chlimage_1-73

NOTE
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 propriétés Largeur et Hauteur.

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

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. Consultez 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 supports variés.

Modificateurs d’image - Vous pouvez modifier les effets d’image en fournissant des commandes d’image supplémentaires. Elles sont décrites dans la section Gestion des paramètres d’image prédéfinis et le Référence de commande.

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 de page. 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 à partir de pour ouvrir un lien. 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 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 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-74

Vous pouvez modifier les paramètres Dynamic Media ci-après en cliquant sur Modifier dans le composant.

NOTE
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 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. Consultez Gestion des paramètres prédéfinis de visionneuse.

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 - Saisissez une valeur en pixels si vous souhaitez que la taille de la vidéo soit fixe. Si vous ne fournissez pas de valeurs, la vidéo devient adaptative.

Comment diffuser une vidéo sécurisée how-to-delivery-secure-video

Dans AEM 6.2, lors de l’installation FP-13480, vous pouvez contrôler si une vidéo est diffusée via une connexion SSL sécurisée (HTTPS) ou une connexion non sécurisée (HTTP). Par défaut, le protocole de diffusion vidéo est automatiquement hérité du protocole de la page web d’intégration. Si la page web est chargée via HTTPS, la vidéo est également diffusée via HTTPS. Et vice versa, si la page web est sur HTTP, la vidéo est diffusée sur HTTP. Dans la plupart des cas, ce comportement par défaut est correct et il n’est pas nécessaire d’apporter des modifications à la configuration. Cependant, vous pouvez remplacer ce comportement par défaut en ajoutant VideoPlayer.ssl=on à la fin d’un chemin d’URL ou à la liste d’autres paramètres de configuration de la visionneuse dans un fragment de code intégré, pour forcer la diffusion vidéo sécurisée.

Pour plus d’informations sur la diffusion sécurisée de vidéos et l’utilisation de l’attribut de configuration VideoPlayer.ssl dans le chemin d’accès URL, consultez Diffusion sécurisée de vidéos dans le Guide de référence des visionneuses. Outre la visionneuse vidéo, la diffusion sécurisée de vidéos est disponible pour la visionneuse de médias mixtes et la visionneuse de vidéos interactives.

Composant Média interactif 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 la variable Média interactif composant.

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. En d’autres termes, la taille de l’écran change automatiquement en fonction de la taille de l’écran. Toutes les visionneuses sont basées sur le HTML5.

chlimage_1-75

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 - Saisissez une valeur en pixels si vous souhaitez que la taille de la vidéo soit 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 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.

recommendation-more-help
5955305e-451f-43a0-8168-b6ad4159b4ca