Show Menu
THEMEN×

Hinzufügen von Dynamic Media-Assets zu Seiten

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. Wechseln Sie dazu in den Layoutmodus und aktivieren Sie die Komponenten vom Typ „Dynamische Medien“. Anschließend können Sie der Seite diese Komponenten und der Komponente Assets hinzufügen. „Dynamische Medien“ und „Interaktive Medien“ sind intelligente Komponenten, die erkennen, ob Sie ein Bild oder ein Video hinzufügen. Die verfügbaren Optionen werden entsprechend angepasst.
Sie können dynamische Medienelemente direkt zur Seite hinzufügen, wenn Sie AEM als WCM verwenden. Wenn Sie einen Drittanbieter für Ihr WCM verwenden, verknüpfen Sie Ihre Assets oder betten Sie sie ein. Eine responsive Website von Drittanbietern finden Sie unter Bereitstellen optimierter Bilder für eine responsive Site .
Sie müssen Assets veröffentlichen, um sie Seiten in AEM hinzufügen zu können. Siehe Veröffentlichen von Dynamic Media-Assets .

Hinzufügen einer Dynamic Media-Komponente zu einer Seite

Das Hinzufügen einer Komponente für dynamische Medien zu einer Seite entspricht dem Hinzufügen einer Komponente zu einer beliebigen Seite. Die Komponenten für dynamische Medien werden in den folgenden Abschnitten ausführlich beschrieben.
Wenn eine Komponente für dynamische Medien auf einer Webseite vorhanden ist, auf die ein Benutzer mit schreibgeschützten Berechtigungen zugreift, werden die Seitenumbrüche und die Komponenten nicht korrekt dargestellt. Der Grund dafür ist, dass die Seite rekonstruiert wurde, um sicherzustellen, dass die Eigenschaften der Komponenten gut sind und alle referenzierten Assets und Konfigurationen verfügbar sind. Die Seite wird dann erneut gerendert und die Komponenten werden umgebrochen. Der entsprechende Komponentencode auf der Seite kann aufgrund des schreibgeschützten Zugriffs des Benutzers nicht erneut gerendert werden.
Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass AEM-Sites-Benutzer über die erforderlichen Berechtigungen zum Zugriff auf die Assets verfügen.
  1. Öffnen Sie in AEM die Seite, auf der Sie die Dynamic Media-Komponente hinzufügen möchten.
  2. Klicken Sie im Bedienfeld auf der linken Seite der Seite (möglicherweise müssen Sie die Anzeige des Seitenbedienfelds umschalten) auf das Symbol " Komponenten ".
  3. Wählen Sie unter der Überschrift " Komponenten "in der Dropdown-Liste die Option " Dynamische Medien "aus. Wenn keine Liste von Komponenten für dynamische Medien verfügbar ist, müssen Sie die Komponenten für dynamische Medien aktivieren, die Sie verwenden möchten. See Enabling Dynamic Media components .
  4. Ziehen Sie eine Komponente für dynamische Medien, die Sie verwenden möchten, auf die Seite an der gewünschten Position.
  5. Bewegen Sie den Mauszeiger direkt über die Komponente. Wenn die Komponente blau hervorgehoben wird, tippen Sie einmal darauf, um die Symbolleiste der Komponente anzuzeigen. Tippen Sie auf das Symbol ​Konfiguration (Schraubenschlüssel).
  6. Bearbeiten Sie die Komponenten nach Bedarf und klicken Sie auf das Häkchen, um die Änderungen zu speichern.

Enabling Dynamic Media components

Wenn keine Komponenten für dynamische Medien verfügbar sind, die einer Seite hinzugefügt werden können, müssen Sie die Komponenten, die Sie verwenden möchten, zunächst aktivieren.
  1. Öffnen Sie in AEM die Seite, auf der Sie die Dynamic Media-Komponente hinzufügen möchten.
  2. Tippen Sie auf der linken Seite der Symbolleiste am oberen Rand der Seite auf das Symbol "Seiteninformationen"und dann in der Dropdown-Liste auf Vorlage bearbeiten .
  3. Tippen Sie auf der rechten Seite der Symbolleiste am oberen Seitenrand aus der Dropdown-Liste auf Struktur .
  4. Tippen Sie unten auf der Seite auf Layout-Container , um die Symbolleiste zu öffnen, und klicken Sie dann auf das Symbol "Richtlinie".
  5. Stellen Sie auf der Seite " Layout-Container "unter der Überschrift " Eigenschaften "sicher, dass die Registerkarte " Zulässige Komponenten "ausgewählt ist.
  6. Führen Sie einen Bildlauf durch, bis dynamische Medien angezeigt werden.
  7. Tippen Sie auf das Symbol > links neben Dynamische Medien , um die Liste zu erweitern, und wählen Sie die Dynamischen Medienkomponenten aus, die Sie aktivieren möchten.
  8. Tippen Sie rechts oben auf der Seite " Layout-Container "auf das Symbol Fertig (Häkchen).
  9. Tippen Sie auf der rechten Seite der Symbolleiste oben auf der Seite in der Dropdown-Liste auf " Anfänglicher Inhalt "und fügen Sie wie gewohnt einer Seite eine Komponente für dynamische Medien hinzu.

Localizing Dynamic Media components

Zum Lokalisieren von Dynamic Media-Komponenten stehen Ihnen zwei Möglichkeiten zur Verfügung:
  • Öffnen Sie auf einer Web-Seite unter „Sites“ die Option Eigenschaften und wählen Sie die Registerkarte Erweitert aus. Wählen Sie die gewünschte Sprache für die Lokalisierung aus.
  • Wählen Sie über den Site-Selector die gewünschte Seite oder Seitengruppe aus. Tippen Sie auf Eigenschaften und wählen Sie die Registerkarte Erweitert aus. Wählen Sie die gewünschte Sprache für die Lokalisierung aus.
    Nicht allen im Menü Sprache verfügbaren Sprachen sind derzeit Tokens zugewiesen.

Dynamic Media components

Dynamic Media and Interactive Media are available under the Dynamic Media tab in Components. Die Komponente "Interaktive Medien"] wird für alle interaktiven Assets wie interaktive Videos, interaktive Bilder oder Karussellsets verwendet. Verwenden Sie für alle anderen Komponenten vom Typ „Dynamische Medien“ die Komponente Dynamische Medien.
Diese Komponenten sind nicht standardmäßig verfügbar und müssen zunächst über den Vorlagen-Editor bereitgestellt werden. Nachdem sie im Vorlageneditor zur Verfügung gestellt wurden , können Sie die Komponenten wie jede andere AEM-Komponente Ihrer Seite hinzufügen.

Komponente „Dynamische Medien“

Die Komponente "Dynamische Medien"ist intelligent. Je nachdem, ob Sie ein Bild oder ein Video hinzufügen, stehen Ihnen verschiedene Optionen zur Verfügung. Die Komponente unterstützt Bildvorgaben, bildbasierte Viewer wie Bildsets sowie Rotationssets, gemischte Mediensets und Videos. Darüber hinaus reagiert der Viewer. Das heißt, die Bildschirmgröße ändert sich automatisch je nach Bildschirmgröße. Bei allen Viewern handelt es sich um HTML5-Viewer.
Wenn es eine Komponente für dynamische Medien, eine Komponente für interaktive Medien oder beides auf einer Webseite gibt, auf die ein Benutzer mit schreibgeschützten Berechtigungen zugreift, werden die Seitenumbrüche und die Komponenten nicht korrekt dargestellt. Der Grund dafür ist, dass die Seite rekonstruiert wurde, um sicherzustellen, dass die Eigenschaften der Komponenten gut sind und alle referenzierten Assets und Konfigurationen verfügbar sind. Die Seite wird dann erneut gerendert und die Komponenten werden umgebrochen. Der entsprechende Komponentencode auf der Seite kann aufgrund des schreibgeschützten Zugriffs des Benutzers nicht erneut gerendert werden.
Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass AEM-Sites-Benutzer über die erforderlichen Berechtigungen zum Zugriff auf die Assets verfügen.
Wenn Sie die Dynamic Media-Komponente hinzufügen und Einstellungen für dynamische Medien leer ist, ist es nicht möglich, ein Asset ordnungsgemäß hinzuzufügen. Überprüfen Sie Folgendes:
  • Sie Dynamic Media aktiviert haben. Dynamic Media ist standardmäßig deaktiviert.
  • das Bild eine Pyramid TIFF-Datei aufweist. Bilder, die vor der Aktivierung von dynamischen Medien importiert wurden, verfügen nicht über eine Pyramid TIFF-Datei.

Arbeiten mit Bildern

Mit der Komponente „Dynamische Medien“ können Sie dynamische Bilder, einschließlich Bildsets, Rotationssets und Sets für gemischte Medien, hinzufügen. Sie können Vergrößerungen sowie Verkleinerungen vornehmen und (sofern zutreffend) ein Bild in einem Rotationsset drehen oder ein Bild aus einem anderen Set auswählen.
Sie können zudem die Viewer-Vorgabe, Bildvorgabe oder das Bildformat direkt in der Komponente konfigurieren. Um ein Bild dynamisch zu machen, können Sie die Haltepunkte festlegen oder eine dynamische Bildvorgabe anwenden.
You must edit the following Dynamic Media Settings by clicking the Edit icon in the component and then Dynamic Media Settings .
Standardmäßig ist die Bildkomponente für dynamische Medien adaptiv. If you want to make it a fixed size, set it in the component in the Advanced tab with the Width and Height settings.
  • Viewer-Vorgabe ​Wählen Sie eine vorhandene Viewer-Vorgabe aus dem Dropdown-Menü. Wenn die gewünschte Viewer-Vorgabe nicht sichtbar ist, müssen Sie sie möglicherweise sichtbar machen. Siehe „Verwalten von Viewer-Vorgaben“. Es ist nicht möglich, eine Viewer-Vorgabe auszuwählen, wenn Sie eine Bildvorgabe verwenden, und umgekehrt. Dies ist die einzig verfügbare Option beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien. Die angezeigten Viewer-Vorgaben sind ebenfalls intelligent – es werden nur relevante Viewer-Vorgaben angezeigt.
  • Viewer-Modifikatoren -Viewer-Modifikatoren haben die Form eines "name=value"-Paars mit einem &-Trennzeichen und ermöglichen das Ändern von Viewern, wie im Viewer-Referenzhandbuch beschrieben. Ein Beispiel für einen Viewer-Modifikator ist posterimage=img.jpg&caption=text.vtt,1, der ein anderes Bild für die Videominiatur festlegt und eine Untertiteldatei mit dem Video verknüpft.
  • Bildvorgabe ​Wählen Sie eine vorhandene Bildvorgabe aus dem Dropdown-Menü. Wenn die gewünschte Bildvorgabe nicht sichtbar ist, müssen Sie sie möglicherweise sichtbar machen. Siehe „Verwalten von Bildvorgaben“. Es ist nicht möglich, eine Viewer-Vorgabe auszuwählen, wenn Sie eine Bildvorgabe verwenden, und umgekehrt. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
  • Bildmodifikatoren ​Sie können Bildeffekte anwenden, indem Sie zusätzliche Bildbefehle bereitstellen. Diese werden unter „Bildvorgaben“ und in der Referenz zum Image-Serving-Befehl beschrieben. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
  • Haltepunkte ​Wenn Sie dieses Asset auf einer responsiven Site verwenden, müssen Sie die Bild-Haltepunkte hinzufügen. Bildhaltepunkte müssen durch Kommas (,) voneinander getrennt werden. Diese Option kann verwendet werden, wenn in einer Bildvorgabe keine Höhe oder Breite festgelegt ist. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar. Sie können die folgenden erweiterten Einstellungen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.
  • Titel ​Ändern Sie den Titel des Bilds.
  • Alt-Text ​Hinzufügen einen Titel für das Bild für Benutzer, die Grafiken deaktiviert haben. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
  • URL, In ​Öffnen Sie ein Asset, um einen Link zu öffnen. Legen Sie die URL fest. Geben Sie in „Öffnen in“ an, ob der Link im selben oder einem neuen Fenster geöffnet werden soll. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
  • Breite und Höhe Geben Sie den Wert in Pixel ein, wenn das Bild eine feste Größe haben soll. Wenn die Werte leer gelassen werden, ist das Asset adaptiv.

Arbeiten mit Videos

Verwenden Sie die Dynamic Media-Komponente, um Ihren Web-Seiten dynamische Videos hinzuzufügen. Beim Bearbeiten der Komponente können Sie eine vordefinierte Video-Viewer-Vorgabe für das Wiedergeben des Videos auf der Seite verwenden.
You must edit the following Dynamic Media Settings by clicking Edit in the component.
Die Videokomponente für Dynamic Media ist standardmäßig adaptiv. Wenn sie eine feste Größe aufweisen soll, müssen Sie dies in der Komponente auf der Registerkarte Erweitert mit Breite und Höhe festlegen.
You can edit the following Advanced Settings by clicking Edit in the component.
  • Titel ​Ändern Sie den Titel des Videos.
  • Breite und Höhe Geben Sie den Wert in Pixel ein, wenn das Video eine feste Größe haben soll. Wenn die Werte leer gelassen werden, wird es adaptiv.

Bei der Arbeit mit smartem Zuschneiden

Verwenden Sie die Dynamic Media-Komponente, um Bild-Assets für smartes Zuschneiden zu Ihren Web-Seiten hinzuzufügen. Beim Bearbeiten der Komponente können Sie eine vordefinierte Video-Viewer-Vorgabe für das Wiedergeben des Videos auf der Seite verwenden.
Weitere Informationen finden Sie unter Bildprofile .
You can edit the following Dynamic Media Settings by clicking Edit in the component.
Standardmäßig ist die Bildkomponente für dynamische Medien adaptiv. Wenn Sie eine feste Größe einrichten möchten, legen Sie sie auf der Registerkarte Erweitert in der Komponente mit der Breite und Höhe fest.
  • Bildmodifikatoren ​Sie können Bildeffekte anwenden, indem Sie zusätzliche Bildbefehle bereitstellen. Diese werden unter „Bildvorgaben“ und in der Referenz zum Image-Serving-Befehl beschrieben. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
You can edit the following Advanced settings by clicking Edit in the component.
  • Titel ​Ändern Sie den Titel des Smart-Schnittbilds.
  • Alt-Text ​Hinzufügen einen Titel für das intelligente Beschneidungsbild für Benutzer, die Grafiken deaktiviert haben. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
  • URL, In ​Öffnen Sie ein Asset, um einen Link zu öffnen. Legen Sie die URL fest. Geben Sie in „Öffnen in“ an, ob der Link im selben oder einem neuen Fenster geöffnet werden soll. Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
  • [Height and Width Geben Sie den Wert in Pixel ein, wenn das Smart-Schnittbild eine feste Größe haben soll. Wenn die Werte leer gelassen werden, wird es adaptiv.

Interactive Media component

Die Komponente „Interaktive Medien“ ist für Assets mit interaktiven Elementen wie Hotspots oder Imagemaps vorgesehen. Verwenden Sie bei interaktiven Bildern, interaktiven Videos oder Karussellbannern die Komponente Interaktive Medien.
Die Komponente "Interaktive Medien"ist intelligent. Je nachdem, ob Sie ein Bild oder ein Video hinzufügen, stehen Ihnen verschiedene Optionen zur Verfügung. Zudem ist der Viewer dynamisch. Die Größe des Bildschirms ändert sich demnach automatisch auf Grundlage der Bildschirmgröße. Bei allen Viewern handelt es sich um HTML5-Viewer.
Wenn es eine Komponente für dynamische Medien, eine Komponente für interaktive Medien oder beides auf einer Webseite gibt, auf die ein Benutzer mit schreibgeschützten Berechtigungen zugreift, werden die Seitenumbrüche und die Komponenten nicht korrekt dargestellt. Der Grund dafür ist, dass die Seite rekonstruiert wurde, um sicherzustellen, dass die Eigenschaften der Komponenten gut sind und alle referenzierten Assets und Konfigurationen verfügbar sind. Die Seite wird dann erneut gerendert und die Komponenten werden umgebrochen. Der entsprechende Komponentencode auf der Seite kann aufgrund des schreibgeschützten Zugriffs des Benutzers nicht erneut gerendert werden.
Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass AEM-Sites-Benutzer über die erforderlichen Berechtigungen zum Zugriff auf die Assets verfügen.
Sie können die folgenden allgemeinen Einstellungen ​bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.
  • Viewer-Vorgabe Wählen Sie eine vorhandene Viewer-Vorgabe aus dem Dropdown-Menü. Wenn die gewünschte Viewer-Vorgabe nicht sichtbar ist, müssen Sie sie möglicherweise sichtbar machen. Viewer-Vorgaben müssen veröffentlicht werden, bevor sie verwendet werden können. Siehe „Verwalten von Viewer-Vorgaben“.
  • Titel ​Ändern Sie den Titel des Videos.
  • Breite und Höhe Geben Sie den Wert in Pixel ein, wenn das Video eine feste Größe haben soll. Wenn die Werte leer gelassen werden, wird es adaptiv.
Sie können die folgenden Einstellungen von Zu Warenkorb hinzufügen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.
  • Produkt-Asset anzeigen Standardmäßig ist dieser Wert ausgewählt. Das Produkt-Asset zeigt ein Bild des Produkts, wie im Commerce-Modul definiert. Deaktivieren Sie das Kontrollkästchen, um das Produkt-Asset nicht anzuzeigen.
  • Produktpreis anzeigen Standardmäßig ist dieser Wert ausgewählt. Der Produktpreis gibt den Preis des Artikels an, wie im Commerce-Modul definiert. Deaktivieren Sie das Kontrollkästchen, um den Produktpreis nicht anzuzeigen.
  • Produktformular anzeigen Standardmäßig ist dieser Wert nicht ausgewählt. Das Produktformular beinhaltet jegliche Produktvarianten, etwa hinsichtlich der Größe und der Farbe. Deaktivieren Sie das Kontrollkästchen, um die Produktvarianten nicht anzuzeigen.

Panoramic Media component

Die Panoramamedienkomponente bezieht sich auf Kugelpanoramen. Solche Bilder bieten ein 360°-Zuschauererlebnis eines Raums, einer Immobile, eines Ortes oder einer Landschaft. Damit ein Bild als Kugelpanorama gilt, muss MINDESTENS eine der beiden folgenden Eigenschaften zutreffen:
  • Ein Seitenverhältnis von 2:1.
  • Mit den Keywords „equirectangular“ oder („spherical“ und „panorama“) oder („spherical“ und „panoramic“) als Tags versehen. Weitere Informationen finden Sie unter Verwenden von Tags .
Die Kriterien für das Seitenverhältnis sowie die Keywords gelten für Panorama-Assets für die Asset-Detailseite und die WCM-Komponente „Panoramamedien“.
Sie können die folgenden erweiterten Einstellungen bearbeiten, indem Sie in der Komponente auf Konfigurieren tippen.
  • Viewer-Vorgabe Wählen Sie einen vorhandenen Viewer aus dem Dropdown-Menü "Viewer-Vorgabe"aus.
Wenn die gesuchte Viewer-Vorgabe nicht angezeigt wird, stellen Sie sicher, dass sie veröffentlicht wurde. Sie müssen Viewer-Vorgaben veröffentlichen, bevor Sie sie verwenden können. Siehe Verwalten von Viewer-Vorgaben .

Bereitstellen von Dynamic Media-Assets mit HTTP/2

HTTP/2 ist das neue, aktualisierte Webprotokoll, das die Kommunikation zwischen Browser und Servern verbessert. Es beschleunigt die Übertragung von Informationen und reduziert die erforderliche Prozessorleistung. Es ist jetzt möglich, Dynamic Media-Assets über HTTP/2 bereitzustellen, das schnellere Reaktions- und Ladezeiten bietet.
Vollständige Informationen zu den ersten Schritten mit HTTP/2 und Ihrem Dynamic Media-Konto finden Sie unter Bereitstellung von Inhalt über HTTP/2 .