您查看的帮助内容对应的版本是:

You can easily create interactive videos that drive conversion directly from the video. Customer engagement with the video takes place in a panel alongside the video player where related service, information, or product thumbnails are scrolled into view based on what is featured in the video. Customers can tap the thumbnail and be linked directly to the service, or add the item to a shopping cart for immediate purchase, or be linked to a web page for more information.

When the video ends, a visual summary of all offerings is displayed to drive a call to action. Customers have another opportunity to tap the item they want. Actionable and specific experiences such as these increase customer engagment and conversion.

See also Interactive Images.

Interactive video in action

Click the following screenshot to watch the interactive video in full.

During playback, as products are used in the video, the identical product appears on the right as a thumbnail image.

Click the thumbnail to pause the video and open the product's Quick View. For example, click the KitchenAid thumbnail image to experience a 360-degree spin view of the mixer, or zoom in to see mixer details.

chlimage_1

注意:

If you create an interactive video to launch a web page when a user clicks a thumbnail image, some devices will block the pop-up web page from opening. In such cases, you must change the pop-up blocker setting on the device. For example, on an Apple iPhone 6, tap Settings > Safari > Block Pop-ups, then slide the control to Off. Now, when you play an interactive video and click a thumbnail, you are prompted if you want to open the pop-up. If you accept, the web page opens.

Watch how interactive videos are created

Watch a 7 minute 30 second walkthrough on how interactive videos are created.
(Although the video walkthrough is branded with Assets on Demand, the principles and steps still apply to Interactive Video in AEM Assets.)

Adobe Customer Success Webinar

The "Using Interactive Video, Link Sharing, and YouTube sharing in AEM Assets" webinar teaches you how to use interactive video and other features to tie conversion driven events into your video marketing content.

Quick Start: Interactive Videos

The following step-by-step workflow description is designed to help you get up and running quickly with interactive videos in Dynamic Media.

Look for the Example heading within some of the Quick Start tasks. It contains a brief tutorial based on the following demo web page:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

The Examples help to illustrate the steps of integrating interactive videos on your website.

Interactive video steps:

  1. (Optional) Identifying Quick View variables - Start by identifying dynamic variables used by your existing Quick View implementation. You use the variables to map product thumbnails to their corresponding product Quick View when you create your interactive video.
    See (Optional) Identifying Quick View variables.
    Note that this step is only required if all the following are true:
    -You want to add interactivity to your video by triggering to Quick Views.
    -Your implementation of AEM does not use an eCommerce integration framework for pulling product data into AEM from any eCommerce solution such as IBM Websphere Commerce, Elastic Path, hybris, or Intershop.
    See eCommerce concepts in AEM Assets.
  2. (Optional) Creating an Interactive Video viewer preset - Customize the appearance and behavior of various components that make up the player such as the video scrubber and the interactive thumbnails.
    Creating your own Interactive Video viewer preset is not required if you intend to use the out-of-the-box Interactive Video viewer presets Shoppable_Video_Light or Shoppable_Video_Dark instead.
    See (Optional) Creating a New Viewer Preset and Special considerations for creating an Interactive Video Viewer preset.
  3. Uploading a video and its associated image assets - Upload a video and associated images that you want to make interactive.
    See Uploading a video and its associated thumbnail assets.
  4. Adding interactivity to your video - Add one or more time segments to the video. Then, associate image thumbnails within those time segments. Assign each image thumbnail to an action such as a hyperlink or a Quick View. (Note that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to AEM Sites pages.)
    Finish by publishing the interactive video assets. Publishing creates the embed code or URL that you will eventually copy and apply to your website landing page.
    See Adding interactivity to your video.
    See Publishing Assets.
  5. Adding an interactive video to your website or to your website in AEM
    If you use AEM Sites, or AEM eCommerce, or both, you can add the interactive video directly to a web page in AEM by dragging the Interactive Media component onto the page. See Adding Dynamic Media Assets to Pages.
    Use the embed code or URL to integrate your interactive video with your website experiences. See Integrating an interactive video with your website.
    If you are using a third party WCM (Web Content Manager), you must integrate the new interactive video with the existing quick view implementation that is used on your website. See Integrating an interactive video with an existing quick view.

(Optional) Identifying Quick View variables

注意:

This task is only required if the following are true:

  • You want to add interactivity to your video by triggering to Quick Views.
  • Your implementation of AEM does not use an eCommerce integration framework for pulling product data into AEM from any eCommerce solution such as IBM Websphere Commerce, Elastic Path, hybris, or Intershop. See eCommerce concepts in AEM Assets.

If your implementation of AEM uses eCommerce, you can skip this task and proceed to the next task.

Start by identifying dynamic variables used by your existing Quick View implementation so that you can map product thumbnails to their corresponding product Quickview during the interactive video creation process.

When you add time segments to a video, you assign a SKU and any additional variables to each thumbnail you add to a segment. Such variables are used later to display the right Quick View product.

It is important to properly identify what variables are required to uniquely trigger a product Quickview.

Sometimes it may be enough to consult with IT specialists responsible for your existing Quick View implementation. They are likely to know the minimum set of data that is needed to identify Quick View in the system. However, in most cases it is also possible to simply analyze the existing behavior of the front-end code.

The majority of Quick View implementations use the following paradigm:

  • User activates a user interface element on the website. For example, clicking a "Quick View" button.
  • The website sends an Ajax request to the backend to load the Quick View data or content, if needed.
  • The Quick View data is translated into the content in preparation for rendering on the web page.
  • Finally, the front-end code visually renders such content on the screen.

The approach, therefore, is to visit different areas of your existing website where Quick View is implemented, trigger the Quick View, and capture the Ajax URL sent by the web page for loading the Quick View data or content.

Normally there is no need for you to use any specialized debugging tools. Modern web browsers feature web inspectors that do an adequate job. The following are a few examples of web browsers that include web inspectors:

  • To see all outgoing HTTP requests in Google Chrome, press F12 to open the Developer Tools panel, and then click the Network tab.
  • In Firefox, you can either activate the Firebug plug-in by pressing F12 and use its Net tab, or you can use the built-in Inspector tool and its Network tab.
  • In Internet Explorer activate the debugger tool by pressing F12.

When network monitoring is turned on in the browser, trigger the Quick View on the page.

Now find the quick view Ajax URL in the network log and copy the recorded URL for future analysis. In most cases when you trigger the quick view there are numerous requests that are sent out to the server. Typically, the quick view Ajax URL is one of the first in the list. It has either a complex query string portion or path, and its response MIME type is either text/html, text/xml, or text/javascript.

During this process it is important to visit different areas of your website, with different product categories and types. The reason is that Quick View URLs may have parts that are common for a given website category, but change only if you visit a different area of the website.

In the simplest case, the only variable part in the Quick View URL is the product SKU. In this case, the product SKU value is the only data piece needed for adding thumbnails to a time segment in the interactive video in AEM.

However, in complex cases, the Quick View URL has different varying elements in addition to the product SKU, such as category ID, color code, and so on. In such cases, every such element becomes a separate variable in the thumbnail data definition in AEM.

Consider the following examples of Quick View URLs and their resulting thumbnail variables:

Single SKU, found in the query string.

The recorded Quick View URLs include the following:

  • http://server/json?productId=866558&source=100

  • http://server/json?productId=1196184&source=100

  • http://server/json?productId=1081492&source=100

  • http://server/json?productId=1898294&source=100

The only variable part in the URL is the value of the productId= query string parameter, and it is clearly a SKU value. Therefore, our thumbnails only need SKU fields populated with values like 866558, 1196184, 1081492, 1898294.

Single SKU, found in the URL path.

The recorded Quick View URLs include the following:

  • http://server/product/6422350843

  • http://server/product/1607745002

  • http://server/product/0086724882

The variable part is in the last portion of the path, and it becomes the SKU value of AEM thumbnails: 6422350843, 1607745002, 0086724882.

SKU and category ID in the query string.

The recorded Quick View URLs include the following:

  • http://server/quickView/product/?category=1100004&prodId=305466

  • http://server/quickView/product/?category=1100004&prodId=310181

  • http://server/quickView/product/?category=1740148&prodId=308706

In this case, there are two varying parts in the URL. The SKU is stored in the prodId parameter and the category ID is stored in the category= parameter.

As such, the thumbnail definitions are pairs. That is, a SKU value and an additional variable called categoryId. The resulting pairs are the following:

  • SKU is 305466 and categoryId is 1100004
  • SKU is 310181 and categoryId is 1100004
  • SKU is 308706 and categoryId is 1740148

 

Example

When the above approach is applied to our Example website, we have a web page with a number of product thumbnails, each having a "SEE MORE" button:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

After you activate all product Quick Views available on the page, you get the following list of Quick View requests made to the backend:

  • datafeed/candles-233396346.json
  • datafeed/candles-233978050.json
  • datafeed/candles-234024346.json
  • datafeed/candles-234024356.json
  • datafeed/candles-234024359.json
  • datafeed/cushions-233939848.json
  • datafeed/cushions-234019477.json
  • datafeed/cushions-234019483.json
  • datafeed/furniture-231747479.json
  • datafeed/furniture-232625621.json
  • datafeed/furniture-232625626.json
  • datafeed/furniture-233939810.json
  • datafeed/furniture-233939825.json
  • datafeed/furniture-233939828.json
  • datafeed/furniture-233939853.json
  • datafeed/furniture-233940334.json
  • datafeed/glassware-000064007.json
  • datafeed/glassware-230722193.json
  • datafeed/glassware-233916550.json
  • datafeed/glassware-233916597.json

Looking at these server calls, you see that product-specific information is only present in the request path. You also notice that the query string is not used at all, and there are two distinct types of data pieces involved:

  • The first type is candles, cushions, furniture, and glassware. You can call this "product category".
  • The second type is product code, such as 233916597. You can assume it is "product SKU".

Given this information, the entire Quick View URL has the following pattern:

/datafeed/$categoryId$-$SKU$.json

Based on such analysis, you conclude that you can use the following two variables for the thumbnails: categoryId and SKU.

You are now ready to upload a video and its associated thumbnail assets.

(Optional) Creating an Interactive Video viewer preset

You can skip this task and continue to the next if you intend to use either of the default, out-of-the-box Interactive Video viewer preset types Shoppable_Video_dark or Shoppable_Video_light.

When a thumbnail is clicked in the authoring environment a preview of the Quick View dialog box appears.

 

chlimage_1

You can optionally create your own custom Interactive Video viewer preset. You can determine, among other things, the styling of the video player, the interactive thumbnails, and the thumbnail grid view that appears at the end of the video.

An Interactive Video viewer preset properly renders the video and all timeline segments you have added. It also uses an example default Quick View when you click a product thumbnail in Preview mode so you can test its interactivity before publishing.

After you save the viewer preset, its state is automatically set to On in the Viewer Presets page. This state means that it is visible in the Dynamic Media component and whenever you preview a video with it. Be sure you also manually publish your new viewer preset.

See Creating a New Viewer Preset to create your own Interactive Video viewer preset.

Uploading a video and its associated thumbnail assets

If you have already uploaded your video and thumbnail assets, proceed to Adding interactivity to your video.

if you uploaded the wrong videos or images, or you want to delete uploaded videos or images that you no longer need, see Deleting Assets.

To upload a video and its associated thumbnail assets:

  1. Upload the video and associated thumbnail assets to the folder or folders you want.

    See Uploading assets.
    See Uploading assets using FTP job scheduling.

    Now add interactivity to your video.

Adding interactivity to your video

You add timeline segments to a video using the in-place visual editor on the Create Interactive Video page.

After you add timeline segments, you add thumbnail images within each segment. For each thumbnail that you add, you apply an action to it. For example, you can apply a Quick View to the thumbnail or you can assign a hyperlink to it. (Note that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to AEM Sites pages.)

Undo and Redo options, near the upper-right corner of the page, are supported during your current creation/editing session.

After you save your interactive video, the video is immediately opened into Preview. From there, you can select an Interactive Video viewer preset and play the video to see an approximate representation of how it will appear to customers.

To add interactivty to your video:

  1. In the Assets view, navigate to the video that you uploaded and want to make interactive.

  2. Do one of the following:

    • On the toolbar, tap Enter Selection, then select the video. On the toolbar, tap Edit.
    • Tap the video to open it in the Viewer Presets page. On the toolbar, tap Edit.
  3. On the Create Interactive Video page, do any one of the following:

    • Tap the Play button to begin playing the video. When a particular product, service, or detail that you want to highlight comes into view, tap Add Segment on the toolbar. Repeat until you have reached the end of the video.

      For each time segment that you add, you can assign one or more thumbnail images to it and then link those thumbnails to Quick View product pages for customers to purchase or to web pages for more information.

    • Tap the Play button to begin playing the video. When a particular product, service, or detail that you want to highlight comes into view, tap Pause. Tap Add Segment.

      Continue playing and pausing the video at points along the timeline where you want to add a segment until you reach the end of the video.
  4. (Optional) Drag the bar on the Timeline Scale Slider left to zoom in or right to zoom out, thereby controlling how much detail you see of the segments that you have added.

    chlimage_1

    Depending on the length of your video, the Segment Duration defaults to the following values:

    If the video length is... The Segment Duration setting defaults to...
    3 minutes or more 60 seconds
    2-3 minutes 30 seconds
    1-2 minutes 20 seconds
    30-60 seconds 10 seconds
    30 seconds or less 5 seconds

    The video timeline uses as much screen real estate as what is made available to it. As such, when you resize the browser, the segments you have added maintain their correct width.

    To illustrate, the following three screenshots are using the same video. Notice that the width of each segment changes depending on the Timeline Scale setting.

    chlimage_1
    Screenshot A

    Screenshot A above shows you the default view of a 29 second product video. The Timeline Scale is set at the default of 5 seconds.

    chlimage_1
    Screenshot B

    In Screenshot B above, the Timeline Scale slider was dragged from the default of 5 seconds to 3 seconds. Notice that the individual Timeline Scale time stamps are now all set at 3 second intervals.

    chlimage_1
    Screenshot C

    In Screenshot C above, the Timeline Scale setting was moved to 8 seconds. Notice how the segments that contain product thumbnails have shrunk. Zooming out in this manner is useful if you have a long video and you want to be able to see an overview of more segments that would normally fit in the width of the page.

  5. (Optional) Do any of the following:

    • To adjust a segment's start time and end time.

      Select a segment, then drag the leading or trailing blue oval to adjust the start or end time, respectively. The video frame displayed moves to the appropriate time in the video, based on your adjustments. The movement of the timeline segment is restricted based on any adjacent segments in the timeline. The minimum allowed segment time is one second.

      Use the following navigation shortcuts to quickly check and fine-tune your video segments:

      • Tap the leading blue oval to seek the video directly to the beginning of that segment.
      • Tap the trailing blue oval to seek the video directly to the end of that segment.
      • Tap the entire segment to return video playback to the start of that segment
    Repositioning a timeline segment
    Repositioning the ending of a timeline segment
    • To delete a segment

      Select the last segment that is on the timeline, then on the toolbar, tap Delete Segment. If two or more segments are selected, the Delete Segment feature is disabled.

      You can only delete the last segment. For example, if you wanted to delete all the segments on the timeline, you must always select the last one, then tap Delete Segment.
  6. Select a time segment to which you want to associate one or more thumbnail images.  

  7. To the right of the video, tap the Content tab.

  8. Under the Content tab, tap Select Assets, then browse and select all the image assets that you want to use with your video. The selected assets are added to the Asset Selector panel in the Content tab.

  9. In the asset selector below the Content tab, do any of the following:

    To associate a thumbnail to the selected timeline segment

    Tap the image in the asset selector panel on the right.

    You can add as many thumbnails as you want to a timeline segment. For each image you select, a check mark appears over the image in the asset selector.

    To reorder thumbnails within a selected timeline segment

    Drag an image asset to its new position within the timeline segment.

    Reordering assets changes their viewing order in the area adjacent to the video player when a customer plays the video.

    To remove a thumbnail from the selected timeline segment

    Do any of the following:

    • In the asset selector panel, tap an image with a check mark to deselect it. The image asset is removed from the timeline segment.
    • In the selected timeline segment, tap an image, then on the toolbar, tap Delete Product.
    Asset picker
    Tapping an image in the asset selector panel adds it to the selected timeline segment.
  10. Select a single thumbnail image within one of the timeline segments, then tap the Actions tab.

  11. Do any of the following:

    To associate the selected thumbnail image with a Quick View

    Under Action Type, tap Quick View.

    If you are an AEM Sites and Ecommerce customer:

    • Notice that the SKU Value text field is pre-populated with the selected product's SKU (Stock Keeping Unit), which is a unique identifier for each distinct product or service that you are offering. This is populated automatically when the image is associated with a product in AEM Commerce.
    • If the pre-populated SKU is incorrect, tap or click the Product Picker icon (magnifying glass) to open the Select Product page. Tap or click the product you want to use, then tap the check mark in the upper-right corner of the page to return to the Interactive Video Editor.

     If you are not an AEM Sites or Ecommerce customer

    • See Identifying hotspot variables. You will need to define these variables. 
    • By default, this SKU field uses the image asset's filename without the extension. If you follow a standard naming convention for your files based on SKU, then this typically does not require any additional edits. 
    • Otherwise, edit the default value and enter the correct SKU value. In the SKU Value text field, type the product's SKU (Stock Keeping Unit), which is a unique identifier for each distinct product or service that you offer. The entered SKU value automatically populates the variable portion of the quick view template so that the system knows to associate the tapped image with a particular SKU's quick view.

    (Optional) If there are other variables within the quick view that you need to use to further identify a product, tap Add Generic Variable. In the text field, specify an additional variable. For example, category=Womens is an added variable.

     

    To associate the selected thumbnail image with a hyperlink

    Under Action Type, tap Hyperlink, then do one of the following:

    • If you are an AEM Sites customer, tap the Site Selector icon (folder) to navigate to a webpage. Note that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to AEM Sites pages.
    • If you are a standalone Dynamic Media customer, in the HREF text field, specify the full URL path to a linked web page.

    Be sure you specify whether to open the link in a new browser tab or in the current tab.

    To edit an action already  assigned to a thumbnail image Within a timeline segment, tap a thumbnail image that has a chain link to the right of its text label. The chain link indicates that an action is assigned to it. Tap the Actions tab to make your changes.
    To change the text label of a thumbnail image

    By default, the text label uses the thumbnail image’s Title metadata field. If Title is not present, the thumbnail image's filename is used instead, but without the extension.

    To change the text label of a thumbnail image, under the Actions tab, directly below the image asset that is displayed, enter the desired text. See the illustration below.

    Note that the new text label is used only by the video player itself and the thumbnail text that is displayed in the timeline segment. The label change does not affect the thumbnail image's Title metadata field nor its filename.

    To revert a change you have made Near the upper-right corner of the page, tap Undo or Redo.
    Text label
    A new text label is added to the thumbnail image.
  12. Do one of the following:

    • Repeat steps 6-11 to add more thumbnail images to timeline segments in your video.
    • Continue to the optional step 13.
  13. (Optional) Do either of the following:

    • Merge Segment - You can combine two adjacent segments (with or without product thumbnails assigned to them) into one segment.

      On the timeline, tap two or more contiguous segments that you want to merge into one. Note that there are no blue oval drag handles on the two selected segments in the illustration below.

    Tap Merge Segment on the toolbar. 

    chlimage_1
    Merging two selected five second segments into one ten second segment.
    • Split Segment - You can divide a single segment into two equally timed segments. If there are product thumbnails already assigned to the segment, the thumbnails are combined into the left segment.

    On the timeline, tap or click a segment you want to divide in half, then tap Split Segment on the toolbar.

    Selecting two or more segments disables the Split Segment feature.

    chlimage_1
    Splitting a selected ten second segment into two segments of five seconds each.
  14. Tap Save, then tap OK to return to the video's Viewer Presets page. On the page, select a viewer preset to the left of the video, then play the video to see the results.

    Near the upper-right corner of the Create Interactive Video page, the name of the currently selected viewer preset used with the video is displayed. Tap the name to select a different viewer preset. For example, the Shoppable_video_light viewer preset lets you play the video with a white display area adjacent to the video. The display area is where the clickable thumbnail images are shown during playback. The Shoppable_video_dark viewer preset lets you play the video with a black display area adjacent to the video.
    If you created your own interactive video viewer preset, you will also see it in the list of presets from which you can choose.

    注意:

    When you save your interactive video, an associated .vtt file is automatically saved with it. The .vtt file is saved to the _VTT folder located at the root of Assets. The file and folder is necessary for your interactive video to play correctly on your website. As such, do not move, edit, or delete the _VTT folder or its contents.

  15. Publish the interactive video. Publishing creates the embed code or URL that you will eventually copy and paste to your website experiences.

    If you added interactivity with Quick Views, only use the embed code; if you added interactivity with hyperlinked webpages, you can also use the published URL. Note, however, that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to AEM Sites pages.

    See Publishing assets.

    注意:

    To publish a shoppable video with Quick Views, be sure you also publish each of the video's related image assets from your commerce area, separately.

    After you have added timeline segments and published the interactive video, you are ready to add it to your existing website landing page. See Integrating an interactive video to your website.

Publishing interactive video assets

See Publishing Assets for details on how to publish interactive video assets.

Integrating an interactive video with your website

After you have uploaded a video, added timeline segments to it, and published the interactive video, you are now ready to add it to your existing website.

If you are an AEM Sites customer, you can add the interactive video by dragging the Interactive Media component to your page. See Adding Dynamic Media Assets to Pages.

 If you are a standalone AEM Assets customer, you can manually add the interactive video to your website as described in this section.

  1. Copy the published interactive video's embed code or URL.
    See Embedding the Video or Image Viewer on a Web Page.
    If you added interactivity with Quick Views, only use the embed code; if you added interactivity with hyperlinked webpages, you can also use the published URL. Note, however, that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to AEM Sites pages.
  2. In the target's web page code, identify where the static video is located.
  3. Remove the static video and replace the code with the embed code or URL that you copied from AEM Assets, as is.
    The copied embed code is set for a responsive environment so it should automatically fit the area previously occupied by the static video.

注意:

As this point, if you added interactivity with only hyperlinked web pages, you are done.

However, if you added any interactivity to trigger a Quick View, the thumbnails adjacent to the interactive video are for display purposes only; they are not yet integrated with your existing Quick Views. In such case, you now need to integrate the interactive video with existing Quick Views on your website.

Example

Using the demo website as an example:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

Notice that it is standard video embed code:

<style type="text/css">
	#s7video_div.s7videoviewer{
		 width:100%; 
		 height:auto;
	}
</style>

<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
	var s7videoviewer = new s7viewers.VideoViewer({
		"containerId" : "s7video_div",
		"params" : { 
			"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
			"contenturl" : "https://demos-pub.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Video",
			"config2": "/etc/dam/presets/analytics",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
			"posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
			"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
	}).init();
</script>

Integration is as simple as removing the video embed code and replacing it with the interactive video embed code from AEM. You can see the result at the following URL. While it shows an Interactive Video present on the page, it is not yet integrated with the existing Quick Views:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-1.html

Integrating an interactive video with an existing quick view

注意:

This task only applies if you are a standalone AEM Assets customer.

The last step in this process is to integrate your interactive video with an existing Quick View implementation that is used on your web site. There is no solution to the integration that works for all cases. Every Quick View implementation is unique. As such, a specific approach is needed that most likely involves the assistance of a front-end IT person.

The existing Quick View implementation normally represents a chain of inter-related actions that happen on the web page in the following order:

  1. A user triggers an element in the user interface of your website.
  2. The front-end code obtains a Quick View URL based on the user interface element that was triggered in step 1.
  3. The front-end code sends an AJAX request using the URL obtained in step 2.
  4. The backend logic returns the corresponding Quick View data or content back to the front-end code.
  5. The front-end code loads the Quick View data or content.
  6. Optionally, the front-end code converts the loaded Quick View data into an HTML representation.
  7. The front-end code displays a modal dialog box or panel and renders the HTML content on the screen for the end user.

These calls may not represent independent public API calls which can be called by the web page logic from an arbitrary step. Instead, it is a chained call where every next step is hidden in the last phase (callback) of the previous step.

At the same time that the interactive video is replacing step 1, and partially step 2, when a user clicks on a thumbnail inside the interactive video, such user interaction is handled by the viewer. The viewer returns an event to the web page that contains all the thumbnail data previously added to AEM.

In such an event handler the front end code does the following:

  • Listens to an event emitted by the interactive video.
  • Constructs a Quick View URL based on the thumbnail data.
  • Triggers the process of loading the Quick View from the backend and rendering it on the screen for display.

In addition, the Interactive Video viewer supports full screen operation mode. The end user triggers Quick Views by clicking a thumbnail without leaving the full screen. To achieve this functionality, you alter the front-end code so that the Quick View modal dialog box is attached to the viewer's container. Do not add document BODY or some other web page element that is not available when the viewer is in full-screen mode. The code that performs this job needs to listened to one more viewer callback that is sent after the viewer loads on the page.

The embed code returned by AEM already has a ready-to-use event handler in place. It is commented out as seen in the following highlighted code snippet:

 

<style type="text/css">
	#s7interactivevideo_div.s7interactivevideoviewer{
		 width:100%; 
		 height:auto;
	}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
	var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
		"containerId" : "s7interactivevideo_div",
		"params" : { 
			"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
			"contenturl" : "https://demos-pub.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
			"config2": "/etc/dam/presets/analytics",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
			"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
			"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
			"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
	})
	/* // Example of interactive video event for quick view.
		 s7interactivevideoviewer.setHandlers({ 
			"quickViewActivate": function(inData) {
 				var sku=inData.sku; //SKU for product ID
				//To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
				loadQuickView(sku); //Replace this call with your quickview plugin
				//Please refer to your quickviewer plugin for the quickview call
			 }, 
"initComplete":function() { 
				//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
				var popup = document.getElementById('quickview_div'); // get custom quick view container
				popup.parentNode.removeChild(popup); // remove it from current DOM
				var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
				var inner_container = document.getElementById(sdkContainerId); 
				inner_container.appendChild(popup); //Attach custom quick view container to viewer
			 } 
		 });
	*/
	s7interactivevideoviewer.init();
</script>

So, it is only necessary to uncomment the highlighted code snippet above and replace the dummy handlers body with code that is specific to the particular web page.

There are two default callback handlers present in the standard embed code: quickViewActivate and initComplete. The quickViewActivate handler triggers when a thumbnail is clicked in the viewer. Use it to integrate the viewer with Quick View activation logic. The initComplete handler triggers only one time when the viewer loads into the page. This handler is used to adjust the Quick View dialog box location in the web page DOM.

The process of constructing the Quick View URL is opposite to the process of identifying thumbnail variables covered earlier in this topic. Using our previously identified Quick View URL examples, you can see how the Quick View URL is constructed in each case:

Single SKU, found in the query string

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/json?productId=" + inData.sku + "&source=100";
     },
 });
Single SKU, found in the URL path s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/product/" + inData.sku;
     },
 });

SKU and category ID in the query string

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku;
     },
 });

The last step to trigger the Quick View URL and activate the Quick View panel most likely requires the assistance of a front-end IT person from your IT department. They have the knowledge to know best how to accurately trigger the Quick View implementation from the proper step, having a ready-to-use Quick View URL.

You can see how these steps are applied to the demo website to fully integrate an interactive video with the Quick View code. Earlier in this topic, the structure of the Quick View URL was identified as the following:

/datafeed/$CategoryId$-$SKU$.json

It is easy to reconstruct this URL inside the quickViewActivate handler using categoryId and sku fields available in the inData object passed to the handler by way of the viewer's code as in the following:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

The demo website is triggering the Quick View dialog box using a simple loadQuickView() function call. This function takes only one argument, which is the Quick View data URL. So the last step needed to integrate the interactive video is to add the following line of code to the quickViewActivate handler:

loadQuickView(quickViewUrl);

Finally, make sure that your Quick View dialog box is attached to the viewer's container element. The default embed code provides sample steps to achieve this functionality. To obtain a reference to the viewer's container element, you can use the following lines of code:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

Where inner_container is a reference to a DIV element managed by the viewer. You want the dialog box to be a child of that DIV.

The steps to actually locate the modal dialog box element and attach it to the above container are case specific. Again, you can seek the help from your front-end developer who is familiar with your Quick View implementation that is needed.

In the case of the sample website, the Quick View modal dialog box is implemented as a DIV with the quickview-modal ID attached directly to the document BODY. Therefore, the code to move that dialog box to the viewer's container is as straightforward as the following:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));

The complete source code is as follows:

<style type="text/css">
	#s7interactivevideo_div.s7interactivevideoviewer{
		 width:100%; 
		 height:auto;
	}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
	var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
		"containerId" : "s7interactivevideo_div",
		"params" : { 
			"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
			"contenturl" : "https://demos-pub.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
			"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
			"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
			"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
	})
	// Example of interactive video event for quick view.
		 s7interactivevideoviewer.setHandlers({ 
			"quickViewActivate": function(inData) {
 				var sku=inData.sku; //SKU for product ID
 				var categoryId=inData.categoryId; //categoryId
				var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
				loadQuickView(quickViewUrl);
			 },
			"initComplete":function() { 
				//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
				var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
				var inner_container = document.getElementById(sdkContainerId);
				inner_container.appendChild(document.getElementById("quickview-modal"));
			 } 
		 });
	s7interactivevideoviewer.init();
</script>

The final demo website with the fully integrated interactive video looks like the following:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-3.html

Using Quickviews to create custom pop-ups

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略