Mixed Media

Mixed Media Viewer is a media viewer. It supports media sets that contain images, swatch sets, spin sets, videos, and Adaptive Video Sets.

A thumbnail at the bottom of the viewer represents each media set element, along with its asset type indicator. When a swatch set element is selected, a secondary row of swatches appears to allow the selection of color variation within the swatch set. Images and swatch set elements support zooming in continuous or inline mode; spin sets support both zooming and spinning. Videos and Adaptive Video Sets support all basic playback controls as long as any optional closed captions are displayed on top of the video content. A user can switch to full-screen anytime by clicking the full-screen button. The viewer has optional close button. It is designed to work on desktops and mobile devices.

The Mixed Media Viewer uses HTML5 streaming video playback in HLS format in its default configuration whenever the underlying system supports that. On systems that do not support HTML5 streaming the viewer falls back to HTML5 progressive video delivery.

Viewer type 505.

See System requirements and prerequisites.

Demo URL

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

Using Mixed Media Viewer

Mixed Media Viewer represents a main JavaScript file and a set of helper files (a single JavaScript include with all Viewer SDK components used by this particular viewer, assets, CSS) downloaded by the viewer in runtime.

You can use the Mixed Media Viewer in pop-up mode using production-ready HTML page provided with IS-Viewers. Or, you can use the viewer in embedded mode, where it is integrated into a target web page using the documented API.

The task of configuring and skinning the viewer is similar to other viewers. All skinning is achieved by way of custom CSS.

See Command reference common to all viewers - Configuration attributes and Command reference common to all Viewers - URL

Interacting with Mixed Media Viewer

Mixed Media Viewer supports single-touch and multi-touch gestures that are common in other mobile applications. When the viewer cannot process a user’s swipe gesture, it forwards the event to the web browser to perform a native page scroll. This functionality lets a user navigate through the page even if the viewer occupies most of the device screen area.

The viewer also supports both touch input and mouse input on Windows devices with touch screen and mouse. This support, however, is limited to Chrome, Internet Explorer 11, and Edge web browsers only.

This viewer is fully keyboard accessible.

See Keyboard accessibility and navigation.

Embedding Mixed Media Viewer

Different web pages have different needs for viewer behavior. Sometimes a web page provides a link that, when selected, opens the viewer in a separate browser window. In other cases, it is necessary to embed the viewer right in the hosting page. In the latter case, the web page may have a static page layout, or use responsive design that displays differently on different devices or for different browser window sizes. To accommodate these needs, the viewer supports three primary operation modes: pop-up, fixed size embedding, and responsive design embedding.

About pop-up mode

In pop-up mode, the viewer is opened in a separate web browser window or tab. It takes the entire browser window area and adjusts in case the browser is resized, or a mobile device’s orientation is changed.

Pop-up mode is the most common for mobile devices. The web page loads the viewer using window.open() JavaScript call, properly configured A HTML element, or any other suitable method.

It is recommended that you use an out-of-the-box HTML page for pop-up operation mode. In this case, it is called MixedMediaViewer.html and is located within the html5/ subfolder of your standard IS-Viewers deployment:

<s7viewers_root>/html5/MixedMediaViewer.html

You can achieve visual customization by applying custom CSS.

The following is an example of HTML code that opens the viewer in a new window:

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

About fixed size and responsive design embedding

In the embedded mode, the viewer is added to the existing web page, which may already have some customer content not related to the viewer. The viewer normally occupies only a part of a web page’s real estate.

The primary use cases are web pages oriented for desktops or tablet devices, and also responsive design pages that adjust layout automatically depending on the device type.

Fixed size embedding is used when the viewer does not change its size after initial load. This action is the best choice for web pages that have a static layout.

Responsive design embedding assumes that the viewer must resize at runtime in response to the size change of its container DIV. The most common use case is adding a viewer to a web page that uses a flexible page layout.

In responsive design embedding mode, the viewer behaves differently depending on the way web page sizes its container DIV. If the web page sets only the width of the container DIV, leaving its height unrestricted, the viewer automatically chooses its height according to the aspect ratio of the asset that is used. This functionality ensures that the asset fits perfectly into the view without any padding on the sides. This use case is the most common for web pages using responsive design layout frameworks like Bootstrap or Foundation.

Otherwise, if the web page sets both the width and the height for the viewer’s container DIV, the viewer fills just that area and follows the size that the web page layout provides. A good example is embedding the viewer into a modal overlay, where the overlay is sized according to web browser window size.

Fixed Size Embedding

You add the viewer to a web page by doing the following:

<s7viewers_root>/html5/js/MixedMediaViewer.js

You can use a relative path if the viewer is deployed on one of the Adobe Dynamic Media Classic servers and it is served from the same domain. Otherwise, you specify a full path to one of Adobe Dynamic Media Classic servers that have the IS-Viewers installed.

The relative path looks like the following:

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

The following code is a complete example of a trivial web page that embeds the Mixed Media Viewer with a fixed size:

<!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>

Responsive embedding with unrestricted height

With responsive design embedding, the web page normally has some kind of flexible layout in place that dictates the runtime size of the viewer’s container DIV. For the following example, assume that the web page allows the viewer’s container DIV to take 40% of the web browser window size, leaving its height unrestricted. The web page HTML code would look like the following:

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

Adding the viewer to such a page is similar to the steps for fixed size embedding. The only difference is that you do not need to explicitly define the viewer size.

All the steps above are the same as with the fixed size embedding. Add the container DIV to the existing "holder" DIV. The following code is a complete example. Notice how viewer size changes when the browser is resized, and how the viewer aspect ratio matches the asset.

<!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>

The following examples page illustrates more real-life uses of responsive design embedding with unrestricted height:

Live demos

Alternate demo location

Flexible size embedding with width and height defined

If there is flexible-size embedding with width and height defined, the web page styling is different. It provides both sizes to the "holder" DIV and centers it in the browser window. Also, the web page sets the size of the HTML and BODY element to 100 percent.

<!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>

The rest of the embedding steps are identical to the steps used for responsive design embedding with unrestricted height. The resulting example is the following:

<!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>

Embedding using Setter-based API

Instead of using JSON-based initialization, it is possible to use setter-based API and no-args constructor. Using this API constructor does not take any parameters and configuration parameters are specified using setContainerId(), setParam(), and setAsset() API methods, with separate JavaScript calls.

The following example illustrates using fixed size embedding with setter-based 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>