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.

Hinweis

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.

Hinweis

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 der Dynamic Media-Komponenten verfügbar ist, müssen Sie wahrscheinlich die zu verwendenden Dynamic Media-Komponenten aktivieren. Informationen hierzu finden Sie unter Aktivieren von Dynamic Media-Komponenten.

    chlimage_1-537

  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.

Aktivieren von Dynamic Media-Komponenten

Wenn keine Dynamic Media-Komponenten zum Hinzufügen zu einer Seite verfügbar sind, bedeutet dies wahrscheinlich, dass Sie zunächst die zu verwendenden Komponenten aktivieren müssen.

  1. Öffnen Sie in AEM die Seite, auf der Sie die Dynamic Media-Komponente hinzufügen möchten.

  2. Tippen Sie links oben auf der Seite in der Symbolleiste auf das Symbol „Seiteninformationen“ und dann in der Dropdown-Liste auf Vorlage bearbeiten.

    edit-template

  3. Tippen Sie oben rechts auf der Seite in der Symbolleiste in der Dropdown-Liste auf Struktur.

    Richtlinie

  4. Tippen Sie unten auf der Seite auf Layout-Container, um die Symbolleiste zu öffnen. Tippen Sie anschließend 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.

    Zugelassene Komponenten

  6. Scrollen Sie nach unten, bis Dynamic Media angezeigt wird.

  7. Tippen Sie links neben Dynamic Media auf „>“, um die Liste zu erweitern, und wählen Sie die Dynamic Media-Komponenten aus, die Sie aktivieren möchten.

    Liste der Dynamic Media-Komponenten

  8. Tippen Sie rechts oben auf der Seite Layout-Container auf das Symbol „Fertig“ (Häkchen).

  9. Tippen Sie oben rechts auf der Seite in der Symbolleiste in der Dropdown-Liste auf Anfänglicher Inhalt und fügen Sie dann wie gewohnt eine Dynamic Media-Komponente zu einer Seite 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.

    chlimage_1-538

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

    Hinweis

    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. Verwenden Sie die Komponente Interaktive Medien für beliebige interaktive Assets wie interaktive Videos, interaktive Bilder oder Karussell-Sets. Verwenden Sie für alle anderen Komponenten vom Typ „Dynamische Medien“ die Komponente Dynamische Medien.

Hinweis

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.

chlimage_1-539

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 Bild-Sets sowie Rotations-Sets, Sets für gemischte Medien 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.

Hinweis

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.

Hinweis

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 Bild-Sets, Rotations-Sets und Sets für gemischte Medien, hinzufügen. Sie können Vergrößerungen sowie Verkleinerungen vornehmen und (sofern zutreffend) ein Bild in einem Rotations-Set 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.

dm-settings-image-preset

Hinweis

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 Bild-Sets, Rotations-Sets 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 Bild-Sets, Rotations-Sets 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 Bild-Sets, Rotations-Sets 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 Bild-Sets, Rotations-Sets 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 Bild-Sets, Rotations-Sets 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 Bild-Sets, Rotations-Sets 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.

chlimage_1-540

You must edit the following Dynamic Media Settings by clicking Edit in the component.

Hinweis

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.

  • Viewer-Vorgabe Wählen Sie eine vorhandene Video-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“.

  • 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 für Adoben beschrieben. Ein Beispiel für einen Viewer-Modifikator ist posterimage=img.jpg&caption=text.vtt,1.

    Mit Viewer-Modifikatoren können Sie beispielsweise Folgendes ausführen:

    • Associate a caption file with a video caption.
    • Associate a navigation file with a video navigation.

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.

dm-settings-smart-cut

You can edit the following Dynamic Media Settings by clicking Edit in the component.

Hinweis

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 Bild-Sets, Rotations-Sets 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 Bild-Sets, Rotations-Sets 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 Bild-Sets, Rotations-Sets oder Sets für gemischte Medien nicht verfügbar.

  • Höhe und Breite 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.

Hinweis

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.

chlimage_1-541

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

panoramic-media-viewer-preset

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.

Auf dieser Seite