Interactive Video

Interactive Video Viewer is a video player that plays streaming and progressive video encoded in the H.264 format.

The viewer also shows interactive product swatches next to the video content. Both single video and Adaptive Video Sets are supported. It is designed to work on both desktop and mobile Web browsers that support HTML5 video. The viewer supports optional closed captions displayed on top of video content, video chapter navigation, and social sharing tools. The purpose of this viewer is to help you implement a “shoppable video” experience. That is, users can select a swatch associated with a particular video time region and get redirected to a Quickview or a product detail page on the customer’s website.

Viewer type is 510.

Demo URLs

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/glacier/InteractiveVideoViewerDemo.html

And

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/AXIS/index.html

System Requirements

See System requirements.

Using Interactive Video Viewer

Interactive Video Viewer represents a main JavaScript file and a set of helper files downloaded by the viewer in runtime. A single JavaScript is included with all Viewer SDK components used by this particular viewer, assets, and CSS.

Interactive Video Viewer can be used in pop-up mode using production-ready HTML page provided with Image Serving Viewers. It can also be used in embedded mode, where it is integrated into the targeted web page using the documented API.

Configuring and skinning are similar to that of the other viewers described in this guide. All skinning is achieved by way of custom (CSS) Cascading Style Sheets.

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

Interacting with Interactive Video Viewer

Interactive Video Viewer provides a set of standard user interface controls for video playback, such as a Play/Pause button, video scrubber, video time bubble, played time/total time indicator, volume control, full-screen button, and closed caption toggle. All of these controls are grouped into a control bar directly under the main view.

On touch devices, the volume control is hidden from the user interface, because it is only possible to control the volume using the device’s hardware buttons.

When the viewer operates in pop-up mode, a full-screen button is not available in the user interface.

The viewer shows a panel with interactive swatches to the right of the video viewing area. The list of swatches automatically advances as the video plays, so that swatches corresponding to the current video region are shown. Clicking or tapping on a swatch triggers an action that was associated with such swatch during author time. Depending on how you set it up, the trigger may redirect to a different page on the web site. Or, it may pass product information back to the web page logic, which in turn can trigger the opening of a Quickview that shows related product content.

It is possible to navigate through the video content quickly when video chapter is activated. Video chapters are displayed as markers in the video scrubber track and show the chapter title and description on rollover (or on a single tap on touch systems). The customer can “seek” to a particular chapter by clicking a chapter marker or tapping a chapter description bubble.

The viewer also supports various social media sharing tools. They are available as a single button in the user interface which expands into a sharing toolbar when the user clicks or taps on it. The sharing toolbar contains an icon for each type of sharing channel supported such as Facebook, Twitter, email share, embed code share, and link share. When email share, embed share, or link share tools are activated, the viewer displays a modal dialog box with a corresponding data entry form. When Facebook or Twitter are called, the viewer redirects the user to a standard sharing dialog box from a social media service. Also, when a sharing tool is activated video playback is paused automatically. Sharing tools are not available in full-screen mode because of web browser security restrictions.

The viewer is fully keyboard accessible. See Keyboard accessibility and navigation.

Embedding Interactive Video Viewer

Interactive Video Viewer is embedded into the hosting page. Such a web page may have a static layout, or it may be “responsive” and display differently on different devices or for different browser window sizes.

To accommodate these needs, the viewer supports two primary operation modes: fixed size embedding and responsive embedding.

About fixed size embedding mode and responsive design embedding mode

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 designed 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 functionality is the best choice for web pages that have a static layout.

Responsive design embedding assumes that the viewer needs to 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 web design layout frameworks like Bootstrap and 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>/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.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="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

Responsive design 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="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.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 interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).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

Responsive Embedding with Width and Height Defined

If there is responsive embedding with width and height defined, the web page styling is different. It provides both sizes to the "holder" DIV and center 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 embedding with unrestricted height. The resulting example is the following:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.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 interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).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 the setter-based API:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7interactivevideoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer();
interactiveVideoViewer.setContainerId("s7viewer");
interactiveVideoViewer.setParam("config", "/etc/dam/presets/viewer/Shoppable_Video_Dark");
interactiveVideoViewer.setParam("serverurl", "https://aodmarketingna.assetsadobe.com/is/image/");
interactiveVideoViewer.setParam("videoserverurl", "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna");
interactiveVideoViewer.setParam("contenturl", "https://aodmarketingna.assetsadobe.com/");
interactiveVideoViewer.setParam("interactivedata", "is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt");
interactiveVideoViewer.setAsset("/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4");
interactiveVideoViewer.init();
</script>
</body>
</html>