Verwalten von Viewer-Vorgaben

Eine Viewer-Vorgabe ist eine Sammlung aus Einstellungen, die bestimmen, wie Benutzer Rich-Media-Assets auf ihren Computer-Bildschirmen und Mobilgeräten anzeigen. Viewer-Vorgaben können von Administratoren erstellt werden. Einstellungen sind für eine Vielzahl an Viewer-Konfigurationsoptionen verfügbar. Sie können beispielsweise die Viewer-Anzeigegröße oder das Zoom-Verhalten ändern.

Siehe auch das Dynamic Media Viewer-Referenzhandbuch.

In diesem Abschnitt wird beschrieben, wie Viewer-Vorgaben erstellt, bearbeitet und verwaltet werden. Sie können jederzeit bei der Vorschau eines Assets eine Viewer-Vorgabe darauf anwenden. Siehe Anwenden von Viewer-Vorgaben.

HINWEIS

Das Bearbeiten von vordefinierten, sofort einsetzbaren Viewer-Vorgaben wird nicht unterstützt. Wenn Sie versuchen, eine standardmäßig vorhandene Viewer-Vorgabe zu bearbeiten, werden Sie aufgefordert, die Viewer-Vorgabe unter einem neuen Namen zu speichern.

Möglichkeit des Zugriffs auf die Tastatur im Viewer

Alle standardmäßigen Viewer unterstützen den Zugriff auf die Tastatur.

Siehe auch Barrierefreiheit und Navigation.

Verwalten von Viewer-Vorgaben

Sie können Viewer-Vorgaben in Adobe Experience Manager hinzufügen, bearbeiten, löschen, veröffentlichen, veröffentlichen und die Veröffentlichung rückgängig machen, indem Sie auf Tools (Hammersymbol) > Assets > Viewer-Vorgaben tippen.

6_5_tools-assets-viewerpresets

HINWEIS

Standardmäßig zeigt das System 15 Viewer-Vorgaben, wenn Sie in einer Detailansicht eines Assets „Viewer“ auswählen. Sie können diese Grenze erhöhen. Siehe Erhöhen der Anzahl angezeigter Viewer-Vorgaben.

Viewer-Unterstützung für Web-Seiten mit responsivem Design

Unterschiedliche Web-Seiten haben unterschiedliche Anforderungen. Mitunter möchten Sie vielleicht, dass eine Web-Seite über einen Link verfügt, der den HTML5-Viewer in einem separaten Browser-Fenster öffnet. In anderen Fällen ist es erforderlich, den HTML5-Viewer direkt auf der Hostingseite einzubetten. Im letzteren Fall hat die Webseite ein statisches Layout. Sie reagiert auch auf "responsiv"und wird auf verschiedenen Geräten oder für unterschiedliche Browserfenster-Größen unterschiedlich angezeigt. Um all diese Anforderungen zu berücksichtigen, unterstützen sämtliche vordefinierten, standardmäßig vorhandenen HTML5-Viewer, die mit Dynamic Media bereitgestellt werden, sowohl statische als auch responsive Web-Seiten.

Weitere Informationen zum Einbetten responsiver Viewer auf Web-Seiten finden Sie unter Bibliothek responsiver und statischer Bilder in der Hilfe zur Dynamic Media Image Serving and Rendering-API.

HINWEIS

Veröffentlichen Sie alle standardmäßigen Viewer, bevor Sie sie für die ersten verwenden.
Siehe Veröffentlichen von Viewer-Vorgaben.

Systemkompatibilität der Viewer-Vorgaben

Alle standardmäßig vorhandenen Viewer-Vorgaben, die mit Dynamic Media bereitgestellt werden, sind mit den folgenden Systemen vollständig kompatibel:

  • Desktops
  • Apple iPhones
  • Apple iPads
  • Android-Smartphones
  • Android-Tablets
  • Für Videos wird eine zusätzliche Unterstützung für die MP4-Wiedergabe für BlackBerry und Windows Phone bereitgestellt.

Rich-Media-Typen für Viewer-Vorgaben

Administratoren können beim Erstellen von Viewer-Vorgaben die folgenden Rich-Media-Typen hinzufügen und anpassen.

Karussellset

Hotspots, Imagemaps oder beide werden zu einer Serie von mindestens zwei Bildern hinzugefügt. Ein Kunde kann die Bilder nach links oder rechts verschieben und dann auf einen Hotspot auf einem Bild klicken, um weitere Informationen zu erhalten oder direkt von der Kategorie, dem Haus oder den Landingpages einer Website aus zu kaufen.

Dimensional

Zeigt 3D-Szenen an, mit denen Sie Ihre Kamera drehen, schwenken, zoomen oder neu zentrieren können.

Flyout-Zoom

Zeigt ein zweites Bild des vergrößerten Bereichs neben dem Originalbild an. Dafür gibt es keine Steuerelemente. Benutzer verschieben die Auswahl auf den gewünschten Bereich.

Bei der Bestimmung der vollständigen Bandbreitenauslastung für diesen Viewer müssen Sie berücksichtigen, dass sowohl das Hauptbild als auch das Flyout-Bild im Viewer verarbeitet werden. Die Größe des Hauptbildes (Anzeigenbreite und -höhe) und der Zoomfaktor bestimmen die Größe des Flyout-Bildes. Sie müssen ein Gleichgewicht zwischen diesen beiden Werten schaffen, um zu verhindern, dass die Flyout-Datei zu groß wird: Wenn das Hauptbild sehr groß ist, reduzieren Sie den Zoomfaktor-Wert. (Die Flyout-Breite und Flyout-Höhe bestimmen die Größe des Flyout-Fensters, aber nicht die Größe des Flyout-Bildes, das im Viewer verarbeitet wird.)

Beispiel: Wenn das Hauptbild eine Größe von 350 x 350 Pixel und einen Zoomfaktor von 3 aufweist, hat das resultierende Flyout-Bild eine Größe von 1050 x 1050 Pixel. Wenn das Hauptbild eine Größe von 300 x 300 Pixel und einen Zoomfaktor von 4 aufweist, hat das Flyout-Bild eine Größe von 1200 x 1200 Pixel. Abhängig von der JPEG-Qualitätseinstellung (empfohlene Einstellungen liegen zwischen 80 und 90) können Sie die Dateigröße erheblich reduzieren. Als Zoomfaktor wird ein Wert zwischen 2,5 und 4 empfohlen, je nach Größe des Hauptbildes.

Inline-Zoom Zeigt ein Bild des hereingezoomten Bereichs im ursprünglichen Viewer an. Es stehen keinerlei Steuerelemente zur Verfügung. Benutzer verschieben vielmehr die Auswahl über den Bereich, der angezeigt werden soll.
Bildset Im Bildset-Viewer können Benutzer unterschiedliche Ansichten oder Farbvariationen eines Elements sehen, indem sie auf eine Miniaturansicht klicken. Dieser Viewer bietet auch Zoomtools, mit denen Bilder genauer untersucht werden können.
Interaktives Bild Hotspots werden zu Bildteilen hinzugefügt, auf die ein Kunde klicken kann, um weitere Informationen zu erhalten oder um direkt von der Kategorie, dem Zuhause oder den Landingpages einer Website aus zu kaufen.
Interaktives Video Miniaturansichten werden zu Zeitschienensegmenten in einem Video hinzugefügt, auf das ein Kunde klicken kann, um weitere Informationen zu erhalten oder direkt von der Kategorie, dem Home oder den Landingpages einer Website aus zu kaufen.
Gemischte Medien Zeigt unterschiedliche Medientypen in einem Viewer an. Dort können Sie Rotationssets, Bildsets, Bilder und Videos aufnehmen.
Panoramabild

Die Viewer für Panoramabilder und PanoramicVR geben Kugelpanoramen wieder, um Benutzern ein 360°-Betrachtererlebnis eines Zimmers, einer Immobilie, eines Orts oder einer Landschaft zu bieten.

Damit ein hochgeladenes 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“.

Smartes Zuschneiden von Videos

Verwenden Sie diesen Viewer, um den Fokus in einem Videos automatisch zu erkennen und das Video entsprechend zuzuschneiden.

Rotationsset Stellt mehrere Ansichten eines Bildes bereit, sodass Benutzer den Gegenstand drehen können, um ihn von allen Seiten zu betrachten.
360-Grad-Video

Verwenden Sie den 360/VR-Video-Viewer, um ein Panoramavideo für eine interaktive Anzeige eines Raums, einer Eigenschaft, eines Standorts, einer Landschaft oder eines medizinischen Verfahrens zu rendern.

Während der Wiedergabe auf einem Flachbildschirm hat der Benutzer die Kontrolle über den Anzeigewinkel. Die Wiedergabe auf Mobilgeräten erfolgt mit den integrierten gyroskopischen Steuerelementen.

Der Viewer bietet native Unterstützung für die Bereitstellung von 360-Grad-Video-Assets. Standardmäßig ist keine weitere Konfiguration für die Anzeige oder die Wiedergabe erforderlich. 360-Grad-Videos werden mit Standardvideoerweiterungen wie .mp4, .mkv und .mov bereitgestellt. Der am häufigsten verwendete Codec ist H.264.

Video

Wiedergeben von Videos unter Verwendung des progressiven oder adaptiven Bitraten-Streamings. Beim Streaming mit adaptiver Bitrate wird eine automatische Geräte- und Brandbreitenerkennung durchgeführt, um Videos mit der richtigen Qualität und im richtigen Format bereitzustellen.

Vertikaler Zoom

Mit dem Viewer für vertikalen Zoom können Sie das Betrachtererlebnis für Produktbilder optimieren, um Ihren Benutzern die bestmögliche Darstellung eines Produktes zu bieten. Die vertikale Positionierung von Farbfeldern:

  • Stellt sicher, dass die Muster "über der Kante"liegen.
    Bei horizontalen Farbfeldern sind die Farbfelder je nach Bildschirmgröße des Benutzers erst sichtbar, wenn der Benutzer einen Bildlauf nach unten durchführt. Wenn die Farbfelder vertikal im Viewer platziert werden, sind sie unabhängig von der Bildschirmgröße des Benutzers sichtbar.
  • Maximiert die Größe des Hauptbildes.
    Bei horizontalen Farbfeldern ist es erforderlich, Platz auf der Seite zu lassen, um sicherzustellen, dass sie sichtbar sind. Diese Positionierung verringerte die mögliche Größe des Hauptbildes. Bei einer vertikalen Farbfeld-Platzierung ist es jedoch nicht notwendig, diesen Platz freizulassen. Somit können Sie die Größe des Hauptbildes maximieren.
Zoom Damit können Benutzer den Bereich durch Klicken ein- und auszoomen. Benutzer können auf Steuerelemente klicken, um ein- und auszuzoomen und das Bild auf seine Standardgröße zurückzusetzen.

Liste standardmäßig vorhandener Viewer-Vorgaben

In der folgenden Tabelle werden alle vordefinierten, standardmäßig vorhandenen Viewer-Vorgaben, die mit Dynamic Media bereitgestellt werden, aufgeführt.

Siehe auch Live-Demos.

Informationen zu unterstützten Webbrowsern und Betriebssystemversionen für Viewer finden Sie in den Viewer-Versionshinweisen.

Weitere Informationen finden Sie in den Viewer-Versionshinweisen im Inhaltsverzeichnis des Viewer-Referenzhandbuchs.

HINWEIS

Alle vordefinierten Viewer-Vorgaben in Dynamic Media werden aktiviert (ein), müssen jedoch veröffentlicht werden.
Siehe Veröffentlichen von Viewer-Vorgaben.

Alle neuen Viewer-Vorgaben, die Sie erstellen und hinzufügen, müssen aktiviert und veröffentlicht werden.
Siehe Aktivieren oder Deaktivieren von Viewer-Vorgaben und Veröffentlichen von Viewer-Vorgaben.

Viewer-Vorgabentitel Typ CSS-Dateiname
Carousel_Dotted_dark Carousel_Set html5_carouselviewer_dotted_dark.css
Carousel_Dotted_light Karussell_Set html5_carouselviewer_dotted_light.css
Carousel_Numeric_dark Karussell_Set html5_carouselviewer_numeric_dark.css
Carousel_Numeric_light Karussell_Set html5_carouselviewer_numeric_light.css
Flyout Flyout_Zoom html5_flyoutviewer.css
ImageSet_dark Bildset html5_zoomviewer_dark.css
ImageSet_light Bildset html5_zoomviewer_light.css
InlineMixedMedia_dark Mixed_Media html5_inlinemixedmediaviewer_dark.css
InlineMixedMedia_light Mixed_Media html5_inlinemixedmediaviewer_light.css
InlineZoom Flyout_Zoom html5_inlinezoomviewer.css
MixedMedia_dark Mixed_Media html5_mixedmediaviewer_dark.css
MixedMedia_light Mixed_Media html5_mixedmediaviewer_light.css
PanoramicImage Panoramic_Image html5_panoramicimage.css
PanoramicImageVR Panoramic_Image html5_panoramicimage.css
Shoppable_Banner Interactive_Image html5_interactiveimage.css
Shoppable_Video_dark Interactive_Video html5_interactivevideoviewer_dark.css
Shoppable_Video_light Interactive_Video html5_interactivevideovewer_light.css
SpinSet_dark Spin_Set html5_spinviewer_dark.css
SpinSet_light Rotationsset html5_spinviewer_light.css

Video

(mit Unterstützung für Untertitel)

Video html5_videoviewer.css

Video360_social

(Enthält grundlegende Steuerelemente für die Videowiedergabe, das Video-Rendering erfolgt im Stereomodus, und die manuelle Blickwinkelsteuerung ist deaktiviert. Jedoch sind die gyroskopischen Funktionen aktiviert und die Social-Media-Eigenschaften deaktiviert)

Video_360 html5_video360viewersocial.css

Video360VR

(Für Endbenutzer, die Virtual-Reality-Brillen verwenden. Enthält grundlegende Steuerelemente für die Videowiedergabe und Social-Media-Eigenschaften)

Video_360 html5_video360viewer.css

Video_social

(mit Unterstützung für Untertitel und soziale Medien)

Video html5_videoviewersocial.css
Zoom_dark
Zoom
html5_basiczoomviewer_dark.css
Zoom_light
Zoom html5_basiczoomviewer_light.css
ZoomVertical_dark
Vertical_Zoom html5_zoomverticalviewer_dark.css
ZoomVertical_light Vertikal_Zoom html5_zoomverticalviewer_light.css

Matrix unterstützter Mobile Viewer-Gesten

In der folgenden Tabelle werden die Mobile Viewer-Gesten aufgeführt, die auf iOS-, Android 2.x- und Android 3.x-Geräten unterstützt werden.

Geste Flyout-Zoom Zoom Drehung

Ziehen

Schwenkt

Schwenkt

Schwenkt

Tippen

Blendet Flyout-Fenster ein

Blendet die Benutzeroberfläche ein oder aus

Blendet die Benutzeroberfläche ein oder aus

Doppeltippen

Trifft nicht zu

Zoomt ein oder setzt zurück

Zoomt ein oder setzt zurück

Aufziehen

Trifft nicht zu

Zoomt ein (nur iOS und Android 3x)

Zoomt ein (nur iOS und Android 3x)

Zuziehen

Trifft nicht zu

Zoomt aus (nur iOS und Android 3x)

Zoomt aus (nur iOS und Android 3x)

Streichen

Scrollt Farbfeldleiste

Scrollt Bilder

Dreht

Schnippen

Scrollt Farbfeldleiste

Scrollt Bilder

Dreht

Erhöhen der Anzahl angezeigter Viewer-Vorgaben

Experience Manager zeigt eine Vielzahl von Viewer-Vorgaben an, wenn Assets von Detail-Ansicht > Viewer angezeigt werden. Sie können die Anzahl der angezeigten Viewer erhöhen oder verringern.

So erhöhen Sie die Anzahl angezeigter Viewer-Vorgaben:

  1. Navigieren Sie zu CRXDE Lite (https://localhost:4502/crx/de).

  2. Navigieren Sie zum Knoten mit der Viewer-Vorgabenliste unter /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist

    chlimage_1-221

  3. Ändern Sie für die Eigenschaft limit den Wert, für den standardmäßig 15 festgelegt ist, in einen höheren Wert.

  4. Navigieren Sie zur Datenquelle der Viewer-Vorgabe unter /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource

    chlimage_1-222

  5. Ändern Sie in der Eigenschaft „limit“ den Wert auf die gewünschte Zahl, z. B. {empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}.

  6. Tippen Sie auf Alle speichern.

Erstellen einer Viewer-Vorgabe

Durch Erstellen von Viewer-Vorgaben können Sie verschiedene Einstellungen anwenden, um Assets anzuzeigen und mit diesen zu interagieren. Sie müssen jedoch keine Viewer-Vorgaben erstellen. Bei Bedarf können Sie die standardmäßigen, standardmäßigen Viewer-Vorgaben verwenden, die bereits im Lieferumfang von Experience Manager Assets enthalten sind.

Wenn Sie sich dafür entscheiden, eine Viewer-Vorgabe zu erstellen, wird der Status des Viewers auf der Seite "Viewer-Vorgaben"automatisch aktiviert (auf Ein eingestellt). Dieser Status bedeutet, dass die Vorgabe in der Komponente für Dynamic Media und in der Komponente für interaktive Medien sowie bei jeder Bild- oder Videovorschau sichtbar ist.

Bestimmte Viewer-Vorgaben weisen exklusive Einstellungen auf, die die Nutzung und das Gesamtverhalten des Viewers beeinflussen können. Abhängig von der von Ihnen erstellten Viewer-Vorgabe sollten Sie diese besonderen Aspekte beachten.

Siehe Besondere Hinweise zum Erstellen von Vorgaben für interaktive Viewer.

Siehe Besondere Hinweise zum Erstellen von Viewer-Vorgaben für Karussellbanner.

So erstellen Sie eine Viewer-Vorgabe:

  1. Tippen Sie in der linken oberen Ecke des Experience Managers auf das Logo des Experience Managers und dann in der linken Leiste auf Tools (Hammersymbol) > Assets > Viewer-Vorgaben.

    6_5_viewerpresets

  2. Tippen Sie auf der Seite „Viewer-Vorgaben“ in der Symbolleiste auf Erstellen.

  3. Geben Sie im Dialogfeld Neue Viewer-Vorgabe in das Feld Vorgabename den Namen der neuen Vorgabe ein. Achten Sie darauf, einen geeigneten Namen festzulegen, da dieser nach dem Tippen auf Erstellen nicht mehr geändert werden kann.

    Wenn Sie die Vorgabe an späterer Stelle in diesen Schritten speichern, wird der Name auf der Seite „Viewer-Vorgaben“ unter der Spaltenüberschrift „Vorgabentitel“ angezeigt.

  4. Wählen Sie aus dem Dropdown-Menü „Rich-Media-Typ“ den Typ der zu erstellenden Viewer-Vorgabe aus und tippen Sie dann oben rechts auf der Seite auf Erstellen.

    Siehe Rich-Media-Typen für Viewer-Vorgaben.

  5. Tippen Sie auf der Seite „Viewer-Vorgabe bearbeiten“ auf die Registerkarte Erscheinungsbild.

  6. Führen Sie einen der folgenden Schritte aus:

    • Wählen Sie aus dem Pulldown-Menü Ausgewählter Typ eine Komponente aus, deren visuelles Design angepasst werden soll. Sie können auch auf ein beliebiges visuelles Element im Viewer tippen oder klicken, um es zum Konfigurieren auszuwählen.

      Der Visual Editor zeigt Ihnen, wie sich eine bestimmte Eigenschaft auf einen Stil auswirkt. Legen Sie eine Eigenschaft fest oder passen Sie sie an, um sofort zu sehen, welche Auswirkungen sie auf den Viewer hat, indem Sie das Beispiel links neben dem Editor verwenden.

      Die CSS-Stileigenschaften für jeden Viewer-Vorgabentyp werden im Hilfethema "Anpassen von <viewer name> Viewer"im Viewer-Referenzhandbuch beschrieben. Wenn Sie z. B. eine Viewer-Vorgabe vom Typ Mixed_Media erstellen, finden Sie im Thema zum Anpassen von Viewern für gemischte Medien eine Aufstellung und Beschreibung jeder Eigenschaft.

    • Wenn Sie die Stileinstellungen in einer separaten CSS-Datei definiert haben, können Sie die CSS-Datei in Experience Manager Assets hochladen. Um die hochgeladene CSS-Datei zu suchen und sie mit der Viewer-Vorgabe zu verknüpfen, tippen Sie unter dem Pulldown-Menü Ausgewählter Typ auf CSS importieren (gegebenenfalls scrollen Sie im Visual Editor nach oben, um sie anzuzeigen).

      Beim Importieren einer CSS-Datei überprüft der Visual Editor, ob CSS die korrekten Viewer-Markierungen verwendet. Wenn Sie etwa einen Zoom-Viewer erstellen, müssen alle CSS-Regeln, die Sie importieren, mit dem zugehörigen Viewer-Klassennamen .s7mixedmediaviewer (definiert in einem übergeordneten Viewer-Element) festgelegt werden.

      Sie können beliebige, selbst definierte CSS-Dateien importieren, solange diese die CSS-Markierungen für den jeweiligen Viewer ordnungsgemäß definieren. (CSS-Markierungen werden im Hilfethema „Anpassen des <Viewer-Name>-Viewers“ im Viewer-Referenzhandbuch erläutert. Wenn Sie beispielsweise mehr über CSS-Markierungen für den Zoom-Viewer erfahren möchten, lesen Sie den Abschnitt Anpassen des Zoom-Viewers.) Es ist jedoch möglich, dass der Visual Editor einige CSS-Werte nicht versteht. In diesem Fall versucht der Visual Editor, die Fehler zu überschreiben, damit CSS nach wie vor verwendet werden kann.

    HINWEIS

    Wenn Sie die CSS lieber direkt im Rohformat bearbeiten möchten, tippen Sie unter dem Pulldown-Menü "Ausgewählter Typ"auf CSS anzeigen/ausblenden (ggf. scrollen Sie im Visual Editor nach oben).
    Wie der visuelle Editor können Sie beim direkten Ändern einer Eigenschaft im CSS sofort sehen, welche Auswirkungen sie auf das Viewer-Beispiel hat. Außerdem wird zur gleichen Zeit genau diese Eigenschaft automatisch im Visual Editor aktualisiert. Daher können Sie entweder den CSS-Editor, den Visual Editor oder beide abwechselnd verwenden.

    HINWEIS

    Wählen Sie für Schaltflächengrafiken das 2fache Bild und laden Sie hochauflösendes Bildmaterial hoch. Beim Arbeiten mit interaktiven Bildern und Bannern können Sie auch aus verschiedenen vordefinierten Hotspot-Schaltflächen wählen.

  7. (Optional) Tippen Sie in der Nähe des oberen Bereichs der Seite „Viewer-Vorgabe bearbeiten“ auf Desktop, Tablet oder Telefon, um visuelle Stile für verschiedene Geräte- und Bildschirmtypen individuell zu definieren.

  8. Tippen Sie auf der Seite „Viewer-Vorgabe bearbeiten“ auf die Registerkarte Verhalten. Sie können auch auf ein beliebiges visuelles Element im Viewer tippen oder klicken, um es zum Konfigurieren auszuwählen.

  9. Wählen Sie im Pulldown-Menü Ausgewählter Typ eine Komponente aus, deren Verhalten Sie ändern möchten.

    Viele Komponenten im Visual Editor sind mit einer detaillierten Beschreibung verknüpft. Diese Beschreibungen werden in blauen Feldern angezeigt, wenn Sie eine Komponente zum Anzeigen der mit ihr verknüpften Parameter einblenden.

    Einige Viewer-Typen verfügen über Komponenten, mit denen Sie Befehle zum Image Serving in einem IS-Befehl-Textfeld angeben können. Eine Liste der verfügbaren Befehle finden Sie in der Image Serving API-Referenz.

    HINWEIS

    Bei Nutzung eines Touch-Geräts, etwa eines Smartphones oder Tablets:

    Nachdem Sie einen Wert in das Textfeld eingegeben haben, tippen Sie auf eine andere Stelle in der Benutzeroberfläche, um die Änderung weiterzuleiten und die virtuelle Tastatur zu schließen. Wenn Sie auf die Eingabetaste tippen, wird keine Aktion ausgeführt.

  10. Tippen Sie oben rechts auf Speichern.

  11. Veröffentlichen Sie die neue Viewer-Vorgabe. Sie müssen die Vorgabe veröffentlichen, bevor Sie sie auf Ihrer Website verwenden können.

    Siehe Veröffentlichen von Viewer-Vorgaben.

Besondere Hinweise zum Erstellen von Viewer-Vorgaben für interaktive Videos

Wissenswertes über Anzeigemodi für Bildminiaturansichten im Anzeigefeld:

Wenn Sie eine Viewer-Vorgabe für interaktive Videos erstellen oder bearbeiten, können Sie festlegen, welcher Anzeigemodus verwendet werden soll. Diese Auswahl trifft zu, wenn Sie InteractiveSwatches aus dem Pulldown-Menü Ausgewählte Komponente unter der Registerkarte Verhalten auswählen. Der von Ihnen gewählte Anzeigemodus beeinflusst, wie und wann Miniaturansichten während der Videowiedergabe angezeigt werden. Sie können entweder den Anzeigemodus segment (Standard) oder den Anzeigemodus continuous auswählen.

Anzeigemodus Beschreibung
Segment

Segment ist der Standardanzeigemodus für die vordefinierten Viewer-Vorgaben für interaktive Videos Shoppable_Video_light und Shoppable_Video_dark sowie alle Viewer-Vorgaben für interaktive Videos, die Sie selbst erstellen.

Angenommen, in diesem Modus werden einem Videosegment weniger Miniaturansichten zugewiesen als die Anzahl der sichtbaren Stellen im Anzeigebereich. In solchen Fällen werden Miniaturansichten aus den nächsten oder vorherigen Untersegmenten nicht eingezogen, um leere Stellen im Bedienfeld zu füllen. So bleibt die Anzeige von einem bestimmten Videosegment zugewiesenen Mustern erhalten.

Kontinuierlich

Nehmen Sie im Anzeigemodus continuous an, die Anzahl der Miniaturansichten in einem Segment ist geringer als die Zahl, die im Bedienfeld sichtbar ist. In solchen Fällen enthält der Viewer automatisch die Anzeige von Miniaturansichten des nächsten Segments oder des vorherigen Segments, in dem die letzte Miniaturansicht angezeigt wird.

Das Video in diesem Thema ist ein Beispiel für den Anzeigemodus continuous .

Wissenswertes über den automatischen Bildlauf im Viewer für interaktive Videos:

Das automatische Bildlaufverhalten von Miniaturansichten der Viewer-Funktionen für interaktive Videos erfolgt unabhängig vom gewählten Anzeigemodus.

Wenn Sie eine interaktive Video-Viewer-Voreinstellung erstellen oder bearbeiten, können Sie über die Registerkarte „Verhalten“ auf „Auto-Bildlauf“ zugreifen. Tippen Sie auf der Registerkarte „Verhalten“ im Dropdown-Menü Ausgewählte Komponenten auf InteractiveSwatches. Das Kontrollkästchen „Automatischer Bildlauf“ befindet sich unter dem Textfeld „IS-Befehl“.

Wenn Sie in der Viewer-Vorgabe bei der Videowiedergabe durch den Benutzer die Option Automatischer Bildlauf deaktivieren (das Kontrollkästchen abwählen), wird im Feld während der gesamten Videodauer nur das erste Miniaturbild angezeigt. Allerdings kann der Benutzer ggf. mithilfe der Pfeilsymbole nach oben und nach unten einen manuellen Bildlauf durch die Miniaturansichten durchführen.

Wenn Sie während der Videowiedergabe die Option Automatischer Bildlauf in der Viewer-Vorgabe aktivieren (auswählen), werden die Miniaturbilder, die einem Videosegment zugewiesen sind, zu Beginn eines Segments in die Ansicht verschoben. Es gibt jedoch Fälle, in denen bestimmte Miniaturansichten innerhalb eines Segments doppelt so lange angezeigt werden wie andere Miniaturansichten vor oder nach dem Segment. Dieses Verhalten tritt auf, weil die Anzahl der Miniaturansichten in einem Segment größer ist als die Zahl, die im Bedienfeld sichtbar ist, und diese nicht gleichmäßig teilbar ist.

Gehen wir zu Illustrationszwecken von einem 30 Sekunden langen Videosegment aus. Insgesamt gibt es neun Miniaturansichten, die im Laufe dieser 30 Sekunden angezeigt werden. Die Größe Ihres Browsers wird dergestalt geändert, dass vier verfügbare Miniaturpositionen im Anzeigefeld vorliegen. Das 30-Sekunden-Videozeitsegment ist in drei Untersegmente unterteilt. Die folgende Tabelle zeigt die Aufschlüsselung, welche Miniaturansichten für ein bestimmtes Zeituntersegment angezeigt werden:

Videountersegment Zeit des Teilsegments in Sekunden Im Feld sichtbare Miniaturen
1 0–10 1, 2, 3, 4
2 10-20 4, 5, 6, 7
3 20-30 6, 7, 8, 9

Video-Untersegment 3 geht nicht über die ihm zugewiesenen Miniaturansichten hinaus. Beachten Sie, dass die Miniaturansichten 4, 6 und 7 im Anzeigefeld doppelt so lang sichtbar sind wie die anderen.

Die durch den Viewer zum Bestimmen der Anzahl der im seitlichen Bedienfeld angezeigten Miniaturansichten verwendete Logik basiert wie folgt auf der Anzahl der verfügbaren Positionen:

  • Anzahl der Untersegmente = Aufrunden bis zum nächsten Untersegment (Anzahl der Miniaturansichten / Anzahl der sichtbaren Slots im Miniaturansicht-Bedienfeld, je nach Größe des Browserfensters).
    Mit dem Beispiel in der oben stehenden Tabelle 9 Miniaturansichten / 4 Slots = 2,25; Die Viewer-Logik rundet sie bis zu drei Untersegmente ab.

  • Anzahl der Miniaturansichten = Aufrunden bis zur nächsten Miniaturansicht (Anzahl der Miniaturansichten / Anzahl der Videountersegmente).
    Mit dem Beispiel in der oben stehenden Tabelle 9 Miniaturansichten / 3 Videountersegmente = 3 Miniaturansichten.

  • Dauer des Teilsegments = Gesamtdauer des Videos / Anzahl der Videountersegmente.
    Anhand des Beispiels in der oben stehenden Tabelle werden 30 Sekunden / 3 Videountersegmente = 10 Sekunden für jedes Videountersegment angezeigt.

Beim Erstellen von Viewer-Vorgaben für Karussellbanner kann der Stil von Hotspots wie folgt geändert werden:

Beschreibung Aktionen
Hotspot-Symbol Ändern des für Hotspots verwendeten Symbols Um das Bild des Hotspot-Symbols zu ändern, tippen Sie auf der Registerkarte Erscheinungsbild in Ausgewählte Komponente auf ImageMapEffect. Wählen Sie unter Symbol die Option Hintergrund und navigieren Sie im Feld Bild zum gewünschten Hintergrundbild.

Aktivieren oder Deaktivieren von Viewer-Vorgaben

Welche Viewer-Vorgaben in der Benutzeroberfläche verfügbar sind, hängt davon ab, welche Vorgaben im Autorenmodus aktiviert wurden. Nach dem Erstellen ist eine Viewer-Vorgabe standardmäßig auf „Ein“ eingestellt. Wenn Sie die Vorgabe deaktivieren, wird sie nicht im Autorenmodus angezeigt. Wenn die Vorgabe veröffentlicht wird, wird sie immer veröffentlicht, unabhängig davon, ob sie ein- oder ausgeschaltet ist. Deaktivieren Sie Viewer-Vorgaben, wenn die Liste zu schwerfällig wird oder wenn keine Viewer-Vorgabe zur Verfügung gestellt werden soll.

So aktivieren oder deaktivieren Sie Viewer-Vorgaben:

  1. Tippen Sie in der linken oberen Ecke des Experience Managers auf das Logo des Experience Managers und dann in der linken Leiste auf Tools (Hammersymbol) > Assets > Viewer-Vorgaben.

  2. Tippen Sie auf der Seite „Viewer-Vorgabe“ unter der Spaltenüberschrift Status auf die Umschaltfläche zum Aktivieren bzw. Deaktivieren einer Viewer-Vorgabe.

    Bei aktivierten Viewer-Vorgaben wird der Umschalter rechts in einem blauen Feld angezeigt. Bei deaktivierten Viewer-Vorgaben wird der Umschalter links in einem hellgrauen Feld angezeigt.

Veröffentlichen von Viewer-Vorgaben

Wird der Status einer Viewer-Vorgabe aktiviert (auf „Ein“ gestellt), bedeutet dies, dass sie in der Dynamic Media-Komponente, in der Komponente für interaktive Medien und bei jeder Anzeige eines Assets sichtbar ist.

Um jedoch ein Asset mit einer Viewer-Vorgabe bereitzustellen, muss die Viewer-Vorgabe auch veröffentlicht werden. Alle Viewer-Vorgaben müssen aktiviert werden, um URL- oder Einbettungscode für ein Asset abzurufen. Aktivieren und veröffentlichen Sie alle im Lieferumfang von Dynamic Media enthaltenen vordefinierten Viewer-Vorgaben. Benutzerdefinierte Viewer-Voreinstellungen, die Sie erstellen und hinzufügen, werden automatisch aktiviert, müssen aber auch veröffentlicht werden.

Siehe Aktivieren oder Deaktivieren von Viewer-Vorgaben.

Siehe auch Anzeigen von Assets in einer Vorschau.

So veröffentlichen Sie Viewer-Vorgaben::

  1. Tippen Sie in der linken oberen Ecke des Experience Managers auf das Logo des Experience Managers und dann in der linken Leiste auf Tools (Hammersymbol) > Assets > Viewer-Vorgaben.
  2. Wählen Sie eine oder mehrere Viewer-Vorgaben zum Veröffentlichen aus.
  3. Tippen Sie auf der Symbolleiste auf das Symbol Veröffentlichen.

Sortieren von Viewer-Vorgaben

  1. Tippen Sie in der linken oberen Ecke des Experience Managers auf das Logo des Experience Managers und dann in der linken Leiste auf Tools (Hammersymbol) > Assets > Viewer-Vorgaben.
  2. Klicken Sie auf Vorgabentitel, Typ, Veröffentlicht oder Status, um nach dieser Spaltenüberschrift zu sortieren. Klicken Sie beispielsweise auf Typ, um die Viewer-Vorgabentypen in alphabetischer oder in umgekehrt alphabetischer Reihenfolge zu sortieren.

Bearbeiten von Viewer-Vorgaben

Das Bearbeiten von vordefinierten, sofort einsetzbaren Viewer-Vorgaben wird nicht unterstützt. Wenn Sie eine standardmäßig vorhandene Viewer-Vorgabe bearbeiten, werden Sie aufgefordert, die Viewer-Vorgabe unter einem neuen Namen zu speichern.

So bearbeiten Sie Viewer-Vorgaben:

  1. Tippen Sie in der linken oberen Ecke des Experience Managers auf das Logo des Experience Managers und dann in der linken Leiste auf Tools (Hammersymbol) > Asset > Viewer-Vorgaben.

  2. Wählen Sie eine Vorgabe aus, indem Sie das Kontrollkästchen links neben dem Viewer-Vorgabentitel aktivieren.

  3. Tippen Sie in der Symbolleiste auf Bearbeiten.

  4. Nehmen Sie auf der Seite Viewer-Vorgabeneditor die gewünschten Änderungen an der Viewer-Vorgabe vor. Verwenden Sie dazu die Optionen auf den Registerkarten Erscheinungsbild und Verhalten.

    Tippen Sie auf der Registerkarte Erscheinungsbild in der oberen linken Ecke der Seite „Viewer-Vorgabe bearbeiten“ auf Desktop, Tablet oder Telefon, um den Präsentationsmodus des Assets zu ändern.

  5. Führen Sie in der oberen rechten Ecke der Seite eine der folgenden Aktionen aus:

    • Tippen Sie auf Speichern, um Ihre Änderungen zu speichern und zur Seite „Viewer-Vorgabe“ zurückzukehren.
    • Tippen Sie auf Abbrechen, um alle von Ihnen vorgenommenen Änderungen rückgängig zu machen und zur Seite „Viewer-Vorgaben“ zurückzukehren.

Löschen von benutzerdefinierten Viewer-Vorgaben

Sie können Viewer-Vorgaben löschen, die Sie erstellt und Dynamic Media hinzugefügt haben.

So löschen Sie benutzerdefinierte Viewer-Vorgaben:

  1. Tippen Sie in der linken oberen Ecke des Experience Managers auf das Logo des Experience Managers und dann in der linken Leiste auf Tools (Hammersymbol) > Assets > Viewer-Vorgaben.
  2. Wählen Sie auf der Seite „Viewer-Vorgaben“ einen Vorgabentitel aus und tippen Sie dann auf das Symbol Papierkorb.
  3. Tippen Sie auf Löschen.

Anwenden von Viewer-Vorgaben auf Assets

Wenn Sie das Asset und den ausgewählten Viewer bereits veröffentlicht haben, werden nach Auswahl einer Viewer-Vorgabe die Schaltflächen URL und Einbetten angezeigt.

So wenden Sie eine Viewer-Vorgabe auf ein Asset an:

  1. Öffnen Sie das Asset, tippen Sie in der Nähe des oberen linken Bereichs der Seite auf das Dropdown-Menü und wählen Sie Viewer aus.

    HINWEIS

    Wenn Sie das Asset und den ausgewählten Viewer bereits veröffentlicht haben, werden nach Auswahl einer Viewer-Vorgabe die Schaltflächen URL und Einbetten angezeigt.

  2. Um sie auf das Asset anzuwenden, wählen Sie im linken Bereich eine Viewer-Vorgabe aus.

    Sie können die URL kopieren, um sie für andere Benutzer freizugeben.

Bereitstellen von Assets mit Viewer-Vorgaben

Informationen zum Abrufen der URLs für Viewer-Vorgaben finden Sie unter Verknüpfen von URLs mit Ihrer Web-Anwendung. Informationen hierzu finden Sie unter Einbetten des Video-Viewers auf einer Web-Seite.

Wenn Sie Experience Manager als WCM verwenden, können Sie Assets mithilfe der Viewer-Vorgaben direkt auf der Seite hinzufügen. Siehe Hinzufügen von Dynamic Media-Assets zu Seiten.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now