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 Adminserstellt 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.
Anweisungen zum Erstellen und Anpassen Ihrer eigenen HTML5-Viewer-Vorgaben finden Sie in der Dokumentation zur HTML5 Viewer SDK API von Adobe Dynamic Media. Das SDK ist auf dem im SDK selbst eingebetteten IS-Veröffentlichungs-Server verfügbar. Jede Bibliotheksversion verfügt über eine eigene SDK-Dokumentation.
Pfad: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html
.
Beispielsweise das 3.10-SDK: https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html
Siehe auch das Adobe Dynamic Media Viewers-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.
Die Bearbeitung von vordefinierten, standardmäßig vorhandenen Viewer-Vorgaben wird als Szenario 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.
Alle standardmäßigen Viewer unterstützen den Zugriff auf die Tastatur.
Weitere Informationen finden Sie unter Tastaturzugriff und Navigation.
Sie können Viewer-Vorgaben in Adobe Experience Manager hinzufügen, bearbeiten, löschen, veröffentlichen sowie Veröffentlichungen aufheben und eine Vorschau anzeigen, indem Sie Tools (Hammersymbol) > Assets > Viewer-Vorgaben auswählen.
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.
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 kann es aber auch erforderlich sein, den HTML5-Viewer direkt auf der Host-Seite einzubetten. In letzterem Fall kann die Web-Seite ein statisches Layout aufweisen. Oder sie kann „responsiv“ sein und auf verschiedenen Geräten oder bei verschieden großen Browser-Fenstern anders angezeigt werden. 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 Webseiten finden Sie unter Bibliothek für responsives Bild.
Veröffentlichen Sie alle standardmäßigen Viewer, bevor Sie sie zum ersten Mal verwenden.
Siehe [Veröffentlichen von Viewer-Vorgaben].(#publishing-viewer-presets)
Alle standardmäßig vorhandenen Viewer-Vorgaben, die mit Dynamic Media bereitgestellt werden, sind mit den folgenden Systemen vollständig kompatibel:
Administratoren können bei der Erstellung 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. Kundinnen und Kunden können einen Bildschwenk nach links oder rechts durchführen und dann einen Hotspot auf einem Bild auswählen, um zusätzliche Details aufzurufen oder direkt über eine Kategorie-, Start- oder Landingpage einer Website 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 gezoomten Bereichs neben dem Originalbild an. Es gibt dazu keine Steuerelemente, sondern die Auswahl muss über den Bereich verschoben werden, der angezeigt werden soll. Beachten Sie bei der Bestimmung der vollständigen Bandbreitennutzung für diesen Viewer, dass sowohl das Hauptbild als auch das Flyout-Bild im Viewer angezeigt werden. Die Größe des Hauptbilds (Stage-Breite und -Höhe) und der Zoom-Faktor bestimmen die Größe des Flyout-Bildes. Damit die Flyout-Datei nicht zu groß wird, sollten Sie diese beiden Werte ausgleichen: Wenn Sie eine große Hauptbildgröße haben, senken Sie den Wert des Zoom-Faktors. (Die Flyout-Breite und Flyout-Höhe bestimmen die Größe des Flyout-Fensters, jedoch nicht die Größe des Flyout-Bildes, das für den Viewer bereitgestellt wird.) Wenn die Größe des Hauptbilds beispielsweise 350 x 350 Pixel bei einem Zoom-Faktor von 3 beträgt, misst das resultierende Flyout-Bild 1050 x 1050 Pixel. Wenn die Größe des Hauptbilds 300 x 300 Pixel bei einem Zoomfaktor von 4 beträgt, umfasst das Flyout-Bild 1200 x 1200 Pixel. Je nach JPEG-Qualitätseinstellung (empfohlene Einstellungen sind zwischen 80 und 90) können Sie die Dateigröße erheblich verringern. Je nach Größe des Hauptbilds werden Zoom-Faktoren von 2,5 bis 4 empfohlen. |
Inline-Zoom | Zeigt ein Bild des gezoomten Bereichs im Original-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 Miniatur klicken. Dieser Viewer bietet auch Zoomtools, mit denen Bilder genauer untersucht werden können. |
Interaktives Bild | Hotspots werden zu Teilmengen eines Bildes hinzugefügt, die Kundinnen und Kunden anschließend auswählen können, um zusätzliche Informationen zu erhalten oder den Kauf direkt über die Kategorie einer Website, über die Startseite oder Landingpages vorzunehmen. |
Interaktives Video | Miniaturansichten werden Zeitleistensegmenten in einem Video hinzugefügt, auf die Kundinnen und Kunden anschließend klicken können, um zusätzliche Informationen zu erhalten oder den Kauf direkt über die Kategorie einer Website, über die Startseite oder Landingpages vorzunehmen. |
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 PanoramaVR rendern kugelförmige Panoramabilder, um ein 360°-Zuschauererlebnis eines Raums, einer Eigenschaft, eines Standorts oder einer Landschaft zu erzielen. Damit ein hochgeladenes Bild als Kugelpanorama gilt, muss es entweder eine oder beide der folgenden Eigenschaften aufweisen:
Sowohl das Kriterium für das Seitenverhältnis als auch das für die Keywords gelten für Panorama-Assets für die Asset-Detailseite und die WCM-Komponente für „Panoramamedien“. Wichtig: Dieser Viewer ist nur im Scene7-Modus von Dynamic Media verfügbar. |
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 einer flachen Anzeige können Benutzerinnen und Benutzer den Anzeigewinkel bestimmen; bei der Wiedergabe auf Mobilgeräten werden in der Regel die integrierten gyroskopischen Funktionen verwendet. 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 häufigste Codec ist H.264. Wichtig: Dieser Viewer ist nur im Scene7-Modus von Dynamic Media verfügbar. |
Video | Gibt Videos mit progressivem oder adaptivem Bit-Rate-Streaming wieder. Beim adaptiven Bit-Rate-Streaming wird automatisch eine Geräte- und Bandbreitenerkennung durchgeführt, um das richtige Video in der richtigen Qualität und im richtigen Format bereitzustellen. |
Vertikaler Zoom | Mit dem Viewer für vertikalen Zoom können Sie das Anzeigeerlebnis von Produktbildern maximieren, um Ihrem Publikum die bestmögliche Darstellung eines Produkts zu bieten. Die vertikale Position von Farbfeldern bewirkt Folgendes:
|
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. |
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 Viewers-Referenzhandbuchs.
Alle vorkonfigurierten Viewer-Vorgaben in Dynamic Media sind bereits aktiviert. Sie müssen sie allerdings noch veröffentlichen.
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 | Carousel_Set | html5_carouselviewer_dotted_light.css |
Carousel_Numeric_dark | Carousel_Set | html5_carouselviewer_numeric_dark.css |
Carousel_Numeric_light | Carousel_Set | html5_carouselviewer_numeric_light.css |
Dimensional | Dimensional | html5_dimensionalviewer.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 |
SmartCropVideo | Smart_Crop_Video | html5_smartcropvideoviewer.css |
SmartCropVideo_social | Smart_Crop_Video | html5_smartcropvideoviewersocial.css |
SpinSet_dark | Spin_Set | html5_spinviewer_dark.css |
SpinSet_light | Spin_Set | html5_spinviewer_light.css |
Video (Enthält Unterstützung für verdeckte Untertitel) |
Video | html5_videoviewer.css |
Video360_social (Enthält grundlegende Steuerelemente für die Videowiedergabe, das Video-Rendering erfolgt im Stereomodus, die manuelle Perspektivensteuerung ist deaktiviert, aber die gyroskopische Steuerung ist aktiviert, keine Social-Media-Funktionen) |
Video_360 | html5_video360viewersocial.css |
Video360VR (Für Endbenutzende konzipiert, die Virtual-Reality-Brillen verwenden. Enthält grundlegende Steuerelemente für die Videowiedergabe und Social-Media-Eigenschaften) |
Video_360 | html5_video360viewer.css |
Video_social (Enthält Unterstützung für verdeckte 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 | Vertical_Zoom | html5_zoomverticalviewer_light.css |
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 |
Auswählen |
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 |
Experience Manager zeigt viele verschiedene Viewer-Vorgaben an, wenn Sie ein Asset unter Detailansicht > Viewer anzeigen. Sie können die Anzahl der angezeigten Viewer erhöhen oder verringern.
Erhöhen der Anzahl der angezeigten Viewer-Vorgaben:
Navigieren Sie zu CRXDE Lite (https://localhost:4502/crx/de).
Navigieren Sie zum Knoten mit der Viewer-Vorgabenliste am folgenden Speicherort:
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist
Ändern Sie für die Eigenschaft limit den Wert, für den standardmäßig 15 festgelegt ist, in einen höheren Wert.
Navigieren Sie zur Datenquelle der Viewer-Vorgabe unter /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource
Ändern Sie in der Eigenschaft „limit“ den Wert auf die gewünschte Zahl, z. B. {empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}
.
Wählen Sie Alle speichern aus.
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. Wenn Sie dies bevorzugen, können Sie auch die bereits standardmäßig in AEM Assets verfügbaren Viewer-Vorgaben verwenden.
Wenn Sie eine Viewer-Vorgabe erstellen möchten, wird nach deren Speicherung der Viewer-Status auf der Seite „Viewer-Vorgaben“ automatisch aktiviert (auf Ein gesetzt). 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. Je nach der von Ihnen erstellten Viewer-Vorgabe sollten Sie diese besonderen Hinweise berücksichtigen.
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:
Klicken Sie in der linken oberen Ecke von Experience Manager auf das Experience Manager-Logo und wählen Sie dann links in der Leiste Tools (Hammersymbol) > Assets > Viewer-Vorgaben.
Wählen Sie auf der Seite „Viewer-Vorgaben“ in der Symbolleiste Erstellen.
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 Klicken 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.
Wählen Sie aus dem Dropdown-Menü „Rich-Media-Typ“ den Typ der zu erstellenden Viewer-Vorgabe aus und klicken Sie dann oben rechts auf der Seite auf Erstellen.
Wählen Sie auf der Seite „Viewer-Vorgabe bearbeiten“ die Registerkarte Erscheinungsbild.
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 klicken, um es zum Konfigurieren auszuwählen.
Der Visual Editor zeigt Ihnen, wie sich eine bestimmte Eigenschaft auf einen Stil auswirkt. Legen Sie eine beliebige Eigenschaft fest bzw. passen Sie diese an, um sofort anhand des Beispiels auf der linken Seite des Editors zu sehen, wie sich dies auf den Viewer auswirkt.
Die CSS-Stileigenschaften für alle Viewer-Vorgabetypen werden im Abschnitt „Anpassen des <viewer name>
-Viewers“ in den Hilfethemen im Viewers-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 Stileinstellungen in einer separaten CSS-Datei definiert sind, können Sie die CSS-Datei in AEM Assets hochladen. Wählen Sie CSS importieren unter dem Pulldown-Menü Ausgewählter Typ aus (ggf. müssen Sie hierzu einen Bildlauf im Visual Editor durchführen), um nach der hochgeladenen CSS-Datei zu suchen und diese mit der Viewer-Vorgabe zu verknüpfen.
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 Viewers-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 nicht alle CSS-Werte versteht. In diesem Fall versucht der Visual Editor, die Fehler zu überschreiben, damit CSS nach wie vor verwendet werden kann.
Wenn Sie CSS lieber direkt im Rohformat bearbeiten möchten, klicken Sie im Pulldown-Menü „Ausgewählter Typ“ auf CSS ein-/ausblenden (Sie müssen ggf. im Visual Editor nach oben blättern, um diese Option anzuzeigen).
Wenn Sie eine Eigenschaft direkt in CSS ändern, können Sie wie im Visual Editor sofort sehen, wie sich dies auf das Viewer-Beispiel auswirkt. 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.
Für Schaltflächengrafiken wählen Sie das 2x-Bild aus und laden Sie Grafiken mit hoher Auflösung hoch. Beim Arbeiten mit interaktiven Bildern und Bannern mit Einkaufsfunktion können Sie auch aus verschiedenen standardmäßig vorhandenen Hotspot-Schaltflächen wählen.
(Optional) Klicken Sie in der Nähe des oberen Bereichs der Seite „Viewer-Vorgabe bearbeiten“ auf Desktop, Tablet oder Smartphone, um visuelle Stile für verschiedene Geräte- und Bildschirmtypen individuell zu definieren.
Wählen Sie auf der Seite „Viewer-Vorgaben-Editor“ die Registerkarte Verhalten. Sie können auch auf ein beliebiges visuelles Element im Viewer klicken, um es zum Konfigurieren auszuwählen.
Beispiel: Beim VideoPlayer-Typ können Sie unter Modifikatoren > Wiedergabe aus einer von drei Streaming-Optionen für adaptive Bit-Raten auswählen:
Um die DASH-Option zu sehen und zu nutzen, muss sie zunächst vom technischen Adobe-Support für Ihr Konto aktiviert werden. Siehe Aktivieren von DASH in Ihrem Konto.
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.
Bei Nutzung eines Touch-Geräts, etwa eines Smartphones oder Tablets:
Nachdem Sie einen Wert in das Textfeld eingegeben haben, klicken 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 klicken, wird keine Aktion ausgeführt.
Klicken Sie oben rechts auf der Seite auf Speichern.
Veröffentlichen Sie die neue Viewer-Vorgabe, damit Sie sie auf Ihrer Website verwenden können.
Siehe Veröffentlichen von Viewer-Vorgaben.
Bei alten Videos, die ein Streaming-Profil mit adaptiver Bit-Rate verwenden, wird die URL weiterhin wie gewohnt mit HLS-Streaming wiedergegeben, bis Sie die Video-Assets erneut verarbeiten. Nach der Neuverarbeitung funktioniert dieselbe URL weiterhin, aber jetzt mit both DASH- und HLS-Streaming aktiviert.
Über Anzeigemodi für Bildminiaturansichten im Anzeigefeld
Beim Erstellen oder Bearbeiten einer Viewer-Vorgabe für interaktive Videos können Sie die zu verwendende Anzeigemodus-Einstellung festlegen, wenn Sie InteractiveSwatches
aus dem Menü Ausgewählte Komponente unter der Registerkarte Verhalten auswählen. Der 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 |
In diesem Modus sind einem Videosegment weniger Miniaturen zugewiesen als die Anzahl der sichtbaren Punkte im Anzeigefeld. Miniaturen aus den nächsten oder vorherigen Untersegmenten werden nicht eingezogen, um leere Stellen im Bedienfeld zu füllen. So bleibt die Anzeige von einem bestimmten Videosegment zugewiesenen Mustern erhalten. |
Kontinuierlich | Im Anzeigemodus Das Video in diesem Thema ist ein Beispiel für den Anzeigemodus |
Ü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. Klicken 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 Miniaturen 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 Miniaturen innerhalb eines Segments doppelt so lange angezeigt werden wie andere Miniaturen vor oder nach dem Segment. Dieses Verhalten tritt auf, weil die Anzahl der Miniaturen 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 Miniaturen, 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-sekündige Videozeitsegment ist in drei Untersegmente unterteilt. In der folgenden Tabelle wird die Aufschlüsselung darüber gezeigt, welche Miniaturen für ein bestimmtes Zeituntersegment angezeigt werden:
Videountersegment | Zeit des Untersegments 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 |
Das Videountersegment 3 wird nicht über die Miniaturen hinweg erweitert, die ihm zugewiesen sind. Beachten Sie, dass die Miniaturen 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 Miniaturen verwendete Logik basiert wie folgt auf der Anzahl der verfügbaren Positionen:
Anzahl der Untersegmente = Aufrundung auf das nächste Untersegment (Anzahl der Miniaturen: Anzahl der sichtbaren Spots im Miniaturfeld, auf Grundlage der Browser-Fenstergröße)
Unter Verwendung des Beispiels in der obigen Tabelle ergibt 9 Miniaturen : 4 Slots = 2,25, was die Viewer-Logik auf drei Untersegmente aufrundet.
Anzahl der Miniaturen = Aufrundung auf die nächste Miniatur (Anzahl der Miniaturen : Anzahl der Videountersegmente).
Unter Verwendung des Beispiels in der obigen Tabelle ergibt 9 Miniaturen : 3 Videountersegmente = 3 Miniaturen.
Dauer des Untersegments = gesamte Videodauer : Anzahl der Videountersegmente.
Unter Verwendung des Beispiels in der obigen Tabelle ergibt 30 Sekunden: 3 Segmente = 10 Sekunden anhaltende Anzeige jedes Segments.
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, klicken 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. |
Welche Viewer-Vorgaben in der Benutzeroberfläche verfügbar sind, hängt davon ab, welche im Autorenmodus aktiv sind. Nach dem Erstellen ist eine Viewer-Vorgabe standardmäßig auf „Ein“ eingestellt. Wenn Sie die Vorgabe deaktivieren möchten, wird sie nicht im Autorenmodus angezeigt. Wenn die Vorgabe veröffentlicht wird, wird sie immer veröffentlicht, unabhängig davon, ob sie aktiviert oder deaktiviert ist. Ggf. müssen Sie Viewer-Vorgaben deaktivieren, wenn die Liste zu umfangreich wird oder wenn eine Viewer-Vorgabe nicht zur Verfügung gestellt werden soll.
So aktivieren oder deaktivieren Sie Viewer-Vorgaben:
Klicken Sie in der linken oberen Ecke von Experience Manager auf das Experience Manager-Logo und wählen Sie dann links in der Leiste Tools (Hammersymbol) > Assets > Viewer-Vorgaben.
Klicken 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 die Umschaltfläche rechts in einem blauen Feld angezeigt; bei deaktivierten Viewer-Vorgaben wird die Umschaltfläche links in einem hellgrauen Feld angezeigt.
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 und veröffentlicht werden, um die URL oder den Einbettungs-Code für ein Asset zu beziehen. Sie müssen alle im Lieferumfang von Dynamic Media enthaltenen sofort einsetzbaren Viewer-Voreinstellungen aktivieren und veröffentlichen. 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.
Weitere Informationen finden Sie unter Vorschau von Assets.
So veröffentlichen Sie Viewer-Vorgaben:
Die Bearbeitung von vordefinierten, standardmäßig vorhandenen Viewer-Vorgaben wird als Szenario 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:
Klicken Sie in der linken oberen Ecke von Experience Manager auf das Experience Manager-Logo und wählen Sie dann links in der Leiste Tools (Hammersymbol) > Assets > Viewer-Vorgaben.
Wählen Sie eine Vorgabe aus, indem Sie das Kontrollkästchen links neben dem Viewer-Vorgabentitel aktivieren.
Wählen Sie in der Symbolleiste die Option Bearbeiten aus.
Nehmen Sie auf der Seite Viewer-Vorgabe bearbeiten die gewünschten Änderungen an der Viewer-Vorgabe vor. Verwenden Sie dazu die Optionen auf den Registerkarten Erscheinungsbild und Verhalten.
Klicken Sie auf der Registerkarte Erscheinungsbild in der oberen linken Ecke der Seite „Viewer-Vorgaben-Editor“ auf Desktop, Tablet oder Smartphone, um den Darstellungsmodus des Assets zu ändern.
Führen Sie in der oberen rechten Ecke der Seite eine der folgenden Aktionen aus:
Sie können Viewer-Vorgaben löschen, die Sie erstellt und Dynamic Media hinzugefügt haben.
So löschen Sie benutzerdefinierte Viewer-Vorgaben:
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:
Öffnen Sie das Asset, klicken Sie in der Nähe des oberen linken Bereichs der Seite auf das Dropdown-Menü und wählen Sie Viewer aus.
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.
Wählen Sie im linken Bereich eine Viewer-Vorgabe aus, um sie auf das Asset anzuwenden.
Sie können die URL kopieren, um sie für andere Benutzer freizugeben.
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.