About HTML5-based Viewers

The following table describes some of the various features found in the HTML5 viewers.

Additional HTML5 viewers are being developed and will be made available in the future.

HTML5 viewer feature

Description

Viewer embedding

All viewers (except flyout) can be used both in embedded and popup mode. Flyout is the only viewer which supports only embedded operation mode. Embedding instructions are clean and consistent across different viewers.

Support for Adobe Analytics

Out-of-the-box Adobe Analytics tracking support.

CSS structure

Viewer CSS uses new top-level CSS class name in all style declarations.

Screen type detection in CSS (media queries)

Default viewer CSS has three blocks: desktop, tablet/phone with standard screen, and tablet/handheld with high density screen.

Parameter name syntax

Parameters are prefixed with either a component class name or with a dynamic instance name.

User interface

Viewers implement a new and consistent user interface design.

API

API is provided and is consistent among different viewer types.

Localization

API supports localization and viewer-specific list of localizable strings.

Interacting with HTML5 Viewers

HTML5 Viewers support single-touch and multi-touch gestures common in other mobile applications.

Gesture

Description

Single tap

Unless it occurs over an active user interface element (like a button), causes all user interface to fade out, leaving the main view unobstructed. Another single tap brings back the user interface.

Single tap on a video asset in the Mobile Mixed Media viewer initiates video playback. In the Flyout viewer, a single tap activates the flyout view or changes between the primary and secondary zoom level.

Double tap

Causes step-wise zooming up to the configured zoom limit. The next double-tap resets the view.

Pinch out

Causes the main view to zoom in up to the configured limit.

Pinch in

Causes the main view to zoom out up to the reset state.

Horizontal swipe or flick

In Zoom viewers, it changes the current image in the main view, or scrolls through the list of swatches in the swatch bar. In the spin viewer, it spins through the spin set horizontally.

Vertical swipe

In the Spin viewer, it changes the vertical view angle in case a multi-dimensional spin set is used.

Device rotation

Adjusts the viewer to better fit the content.