ÃÛ¶¹ÊÓƵ

Smart Crop Video smart-crop-video

The Smart Crop Video Viewer plays streaming and progressive video encoded in the H.264 format with the addition of smart crop support. It is delivered from Dynamic Media Classic or Experience Manager with Dynamic Media.

See System requirements and prerequisites.

Both single video and Adaptive Video Sets are supported. Also, the viewer supports working with progressive video and HLS streams hosted on external locations. It is designed to work on both desktop and mobile Web browsers that support HTML5 video. This viewer also supports optional closed captions that are displayed on top of video content, video chapter navigation, and social media sharing tools.

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

Viewer type 518.

Demo URL section-e1c3106f5b3e445d9b95be337c2f94e2

Using Smart Crop Video Viewer section-f21ac23d3f6449ad9765588d69584772

Smart Crop Video 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, and CSS-downloaded by the viewer in runtime.

You can use the Smart Crop Video 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 Smart Crop Video Viewer section-ab66eb6955aa4a8aa6d14a3b3acfed3f

Smart Crop Video Viewer provides a set of standard user interface controls for video playback, such as:

All these controls are grouped into a control bar at the bottom of the viewer user interface.

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

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

It is possible to navigate the content of a video quickly when video chapter is activated. Video chapters are displayed as markers in the video scrubber track and show the chapter title and associated description on a mouse rollover or with a single tap on touch systems. Users can seek to a particular chapter by selecting a chapter marker or selecting the chapter description bubble.

The viewer 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.

Social media sharing tools with Smart Crop Video Viewer section-907d316fe1da4b87abb9775f02464704

The Smart Crop Video Viewer supports 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.

Embedding Smart Crop Video Viewer section-6bb5d3c502544ad18a58eafe12a13435

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 directly on 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: popup, fixed size embedding, and responsive design embedding.

Embedding multiple videos on the same page is supported on tablet and mobile devices. Usually, only one video can be played at a time. When a user starts playing one video, and then tries to play another video, the first video is automatically paused. The video that was auto-paused remembers its current playback time, so the user can always get back to it and resume play. The only exception this rule is in Chrome browser on Androidâ„¢ 4.x devices, which can play videos in parallel.

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 device orientation is changed.

This 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-box HTML page for pop-up operation mode. It is called SmartCropVideoViewer.html and it is located under the html5/ subfolder of your standard IS-Viewers deployment:

<s7viewers_root>/html5/SmartCropVideoViewer.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/SmartCropVideoViewer.html?asset=html5automation/frisbee-AVS" target="_blank">Open popup viewer</a>

About fixed size embedding mode and responsive 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 the 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 viewer does not change its size after initial load. This choice is the best for web pages that have a static page layout.

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

In responsive design embedding mode, the viewer behaves differently depending on the way the 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 method 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 that use a responsive design layout framework 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 provided by web page layout. A good example is embedding the viewer into a modal overlay, where the overlay is sized according to the size of the web browser window.

Fixed size embedding

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

<s7viewers_root>/html5/js/SmartCropVideoViewer.js

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

Relative path looks like the following:

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

Responsive design embedding with unrestricted height

With the responsive design embedding, the web page normally has some kind of flexible layout in place that dictates the run-time size of the viewer’s container DIV. For purposes of this 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 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 container DIV to the existing " holder" DIV. The following code is a complete example. You can see how the 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/SmartCropVideoViewer.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 smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "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 use of responsive design embedding with unrestricted height:

Alternate demo location

Responsive design embedding with width and height defined

If there is responsive design 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%:

<!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 remaining embedding steps are identical to 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/SmartCropVideoViewer.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 smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "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. With that 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 fixed size embedding with setter-based API:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7videoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer();
smartCropVideoViewer.setContainerId("s7viewer");
smartCropVideoViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
smartCropVideoViewer.setParam("videoserverurl", "http://s7d1.scene7.com/is/content/");
smartCropVideoViewer.setAsset("html5automation/frisbee-AVS");
smartCropVideoViewer.init();
</script>
</body>
</html>