Gemischte Medien mixed-media

„Viewer für gemischte Medien“ ist ein Medien-Viewer. Sie unterstützt Mediensets, die Bilder, Mustersets, Rotationssets, Videos und adaptive Videosets enthalten.

Eine Miniaturansicht am unteren Rand des Viewers stellt jedes Medienset-Element zusammen mit seiner Asset-Typanzeige dar. Wenn ein Farbfeldset-Element ausgewählt wird, wird eine sekundäre Reihe von Farbfeldern angezeigt, um die Auswahl von Farbvarianten innerhalb des Farbfeldsets zu ermöglichen. Bilder und Farbfeldsatzelemente unterstützen das Zoomen im kontinuierlichen oder Inline-Modus. Rotationssets unterstützen sowohl Zoomen als auch Drehen. Videos und adaptive Videosets unterstützen alle grundlegenden Wiedergabesteuerelemente , solange optionale verdeckte Untertitel über dem Videoinhalt angezeigt werden. Ein Benutzer kann jederzeit zum Vollbildmodus wechseln, indem er auf die Schaltfläche für den Vollbildmodus klickt. Der Viewer verfügt über eine optionale Schaltfläche Schließen . Es wurde für Desktop-PCs und mobile Geräte entwickelt.

Der Viewer für gemischte Medien verwendet HTML5-Streaming-Videowiedergabe im HLS-Format in der Standardkonfiguration, wenn das zugrunde liegende System dies unterstützt. Auf Systemen, die HTML5-Streaming nicht unterstützen, wird der Viewer auf die progressive Videobereitstellung von HTML5 zurückgesetzt.

Viewer-Typ 505.

Siehe Systemanforderungen und Voraussetzungen.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/MixedMediaViewer.html?asset=Scene7SharedAssets/Mixed_Media_Set_Sample

Verwenden des Viewers für gemischte Medien section-f21ac23d3f6449ad9765588d69584772

Der Viewer für gemischte Medien stellt eine JavaScript-Hauptdatei und einen Satz Hilfsdateien (ein einzelnes JavaScript-Include mit allen Viewer-SDK-Komponenten, die von diesem bestimmten Viewer verwendet werden, Assets, CSS) dar, die vom Viewer zur Laufzeit heruntergeladen wurden.

Sie können den Viewer für gemischte Medien im Popup-Modus verwenden, indem Sie die produktionsbereite HTML-Seite verwenden, die mit IS-Viewers bereitgestellt wird. Sie können den Viewer auch im eingebetteten Modus verwenden, in dem er mithilfe der dokumentierten API in eine Ziel-Web-Seite integriert wird.

Die Aufgabe der Konfiguration und Skin-Verwaltung des Viewers ist ähnlich wie bei anderen Viewern. Die gesamte Skin-Verwaltung erfolgt über benutzerdefiniertes CSS.

Siehe Für alle Viewer gemeinsame Befehlsreferenz - Konfigurationsattribute und Für alle Viewer gemeinsame Befehlsreferenz - URL

Interagieren mit dem Viewer für gemischte Medien section-ab66eb6955aa4a8aa6d14a3b3acfed3f

Der gemischte Medien-Viewer unterstützt Single-Touch- und Multi-Touch-Gesten, die in anderen Mobile Apps üblich sind. Wenn der Viewer die Wischgeste eines Benutzers nicht verarbeiten kann, leitet er das Ereignis an den Webbrowser weiter, um einen nativen Seitenscroll durchzuführen. Mit dieser Funktion kann ein Benutzer durch die Seite navigieren, auch wenn der Viewer den größten Teil des Gerätebildbereichs einnimmt.

Der Viewer unterstützt auch Touch-Eingabe und Mauseingabe auf Windows-Geräten mit Touchscreen und Maus. Diese Unterstützung ist jedoch auf Chrome, Internet Explorer 11 und Edge-Webbrowser beschränkt.

Dieser Viewer ist vollständig mit der Tastatur zugänglich.

Siehe Tastaturzugriff und Navigation.

Einbetten des Viewers für gemischte Medien section-6bb5d3c502544ad18a58eafe12a13435

Verschiedene Web-Seiten haben unterschiedliche Anforderungen an das Viewer-Verhalten. Manchmal enthält eine Web-Seite einen Link, der bei Auswahl den Viewer in einem separaten Browser-Fenster öffnet. In anderen Fällen ist es erforderlich, den Viewer direkt in die Hosting-Seite einzubetten. Im letzteren Fall kann die Web-Seite über ein statisches Seiten-Layout verfügen oder ein responsives Design verwenden, das auf verschiedenen Geräten oder für verschiedene Browser-Fenstergrößen unterschiedlich angezeigt wird. Um diesen Anforderungen gerecht zu werden, unterstützt der Viewer drei primäre Betriebsmodi: Popup, Einbettung mit fester Größe und Einbetten von responsivem Design.

Über den Popup-Modus section-77d5aa03b8b94566958a179b1a2cd474

Im Popup-Modus wird der Viewer in einem separaten Fenster oder einer separaten Registerkarte des Webbrowsers geöffnet. Sie nimmt den gesamten Browser-Fensterbereich und passt sich an, falls die Größe des Browsers geändert oder die Ausrichtung eines Mobilgeräts geändert wird.

Der Popup-Modus ist der gängigste für Mobilgeräte. Die Web-Seite lädt den Viewer mithilfe window.open() JavaScript-Aufrufs, A ordnungsgemäß konfigurierten HTML-Elements oder einer anderen geeigneten Methode.

Es wird empfohlen, eine vorkonfigurierte HTML-Seite für den Popup-Betriebsmodus zu verwenden. In diesem Fall wird sie als MixedMediaViewer.html bezeichnet und befindet sich im html5/ Unterordner Ihrer standardmäßigen IS-Viewer-Bereitstellung:

<s7viewers_root>/html5/MixedMediaViewer.html

Sie können die visuelle Anpassung erreichen, indem Sie benutzerdefiniertes CSS anwenden.

Im Folgenden finden Sie ein Beispiel für HTML-Code, der den Viewer in einem neuen Fenster öffnet:

<a href="http://s7d1.scene7.com/s7viewers/html5/MixedMediaViewer.html?asset=Scene7SharedAssets/Mixed_Media_Set_Sample" target="_blank">Open popup viewer</a>

Über die Einbettung in festes Format und responsives Design section-ec86b100ba5943d0b16694268520bbde

Im eingebetteten Modus wird der Viewer zur vorhandenen Web-Seite hinzugefügt, die möglicherweise bereits einige Kundeninhalte enthält, die nicht mit dem Viewer verknüpft sind. Der Viewer belegt normalerweise nur einen Teil des Grundbesitzes einer Web-Seite.

Die wichtigsten Anwendungsfälle sind Web-Seiten, die für Desktops oder Tablet-Geräte ausgerichtet sind, sowie responsive Design-Seiten, deren Layout automatisch an den Gerätetyp angepasst wird.

Einbetten in fester Größe wird verwendet, wenn der Viewer seine Größe nach dem ersten Laden nicht ändert. Diese Aktion ist die beste Wahl für Web-Seiten mit statischem Layout.

Beim Einbetten eines responsiven Designs wird davon ausgegangen, dass die Größe des Viewers zur Laufzeit entsprechend der Größenänderung seiner Container-DIV geändert werden muss. Der häufigste Anwendungsfall ist das Hinzufügen eines Viewers zu einer Web-Seite, die ein flexibles Seiten-Layout verwendet.

Im responsiven Design-Einbettungsmodus verhält sich der Viewer unterschiedlich, je nachdem, wie die Größe der Web-Seite seinen Container-DIV bestimmt. Wenn die Web-Seite nur die Breite des Container-DIV festlegt und seine Höhe nicht eingeschränkt wird, wählt der Viewer automatisch seine Höhe entsprechend dem Seitenverhältnis des verwendeten Assets aus. Diese Funktion stellt sicher, dass das Asset perfekt in die Ansicht passt, ohne dass an den Seiten ein Abstand vorhanden ist. Dieser Anwendungsfall ist der häufigste bei Web-Seiten, die responsive Design-Layout-Frameworks wie Bootstrap oder Foundation verwenden.

Wenn die Web-Seite jedoch sowohl die Breite als auch die Höhe für die Container-DIV des Viewers festlegt, füllt der Viewer nur diesen Bereich aus und folgt der Größe, die das Web-Seiten-Layout bereitstellt. Ein gutes Beispiel ist das Einbetten des Viewers in eine modale Überlagerung, bei der die Größe der Überlagerung an die Fenstergröße des Webbrowsers angepasst ist.

Einbettung mit fester Größe section-17d162f76ffa4804b27928f51e7bea1d

Sie können den Viewer wie folgt zu einer Web-Seite hinzufügen:

<s7viewers_root>/html5/js/MixedMediaViewer.js

Sie können einen relativen Pfad verwenden, wenn der Viewer auf einem der Adobe Dynamic Media Classic-Server bereitgestellt wird und er von derselben Domain bereitgestellt wird. Andernfalls geben Sie einen vollständigen Pfad zu einem der Adobe Dynamic Media Classic-Server an, auf denen die IS-Viewer installiert sind.

Der relative Pfad sieht wie folgt aus:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/MixedMediaViewer.js"></script>

<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
<script type="text/javascript">
mixedMediaViewer.init();
</script>

Der folgende Code ist ein vollständiges Beispiel für eine triviale Web-Seite, auf der der Viewer für gemischte Medien mit einer festen Größe eingebettet ist:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
#s7viewer.s7mixedmediaviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

Responsives Einbetten mit unbegrenzter Höhe section-056cb574713c4d07be6d07cf3c598839

Beim Einbetten eines responsiven Designs verfügt die Web-Seite normalerweise über ein flexibles Layout, das die Laufzeitgröße der Container-DIV des Viewers bestimmt. Nehmen wir für das folgende Beispiel an, dass die Web-Seite dem Container-DIV des Viewers ermöglicht, 40 % der Fenstergröße des Webbrowsers zu verwenden, wobei seine Höhe nicht beschränkt wird. Der Web-Seiten-HTML-Code würde wie folgt aussehen:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

Das Hinzufügen des Viewers zu einer solchen Seite ähnelt den Schritten für Einbetten in fester Größe. Der einzige Unterschied besteht darin, dass Sie die Viewer-Größe nicht explizit definieren müssen.

Alle oben genannten Schritte sind dieselben wie bei der Einbettung in fester Größe. Fügen Sie das Container-DIV zum vorhandenen "holder"-DIV hinzu. Der folgende Code ist ein vollständiges Beispiel. Beachten Sie, wie sich die Viewer-Größe ändert, wenn der Browser skaliert wird, und wie das Seitenverhältnis des Viewers mit dem Asset übereinstimmt.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

Die folgende Beispielseite zeigt weitere reale Verwendungen der responsiven Designeinbettung mit unbegrenzter Höhe:

Live-Demos

Alternativer Demo-Speicherort

Flexible Einbettungsgröße mit definierter Breite und Höhe section-0a329016f9414d199039776645c693de

Wenn es Einbettungen in flexibler Größe gibt, bei denen Breite und Höhe definiert sind, ist der Web-Seiten-Stil anders. Es stellt dem "holder"-DIV beide Größen zur Verfügung und zentriert ihn im Browser-Fenster. Außerdem legt die Web-Seite die Größe des HTML- und BODY auf 100 Prozent fest.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

Die restlichen Einbettungsschritte sind identisch mit den Schritten für responsive Designeinbettung mit unbegrenzter Höhe. Das daraus resultierende Beispiel lautet:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

Einbetten mithilfe der Setter-basierten API section-af26f0cc2e5140e8a9bfd0c6a841a6d1

Anstatt die JSON-basierte Initialisierung zu verwenden, ist es möglich, eine Setter-basierte API und einen Nicht-Args-Konstruktor zu verwenden. Bei Verwendung dieses API-Konstruktors sind keine Parameter erforderlich und Konfigurationsparameter werden mithilfe von setContainerId()-, setParam()- und setAsset()-API-Methoden mit separaten JavaScript-Aufrufen angegeben.

Das folgende Beispiel veranschaulicht die Verwendung der Einbettung fester Größe mit einer Setter-basierten API:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
#s7viewer.s7mixedmediaviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer();
mixedMediaViewer.setContainerId("s7viewer");
mixedMediaViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
mixedMediaViewer.setAsset("Scene7SharedAssets/Mixed_Media_Set_Sample");
mixedMediaViewer.init();
</script>
</body>
</html>