HTTPS video delivery

Last update: 2023-11-03
  • Created for:
  • Developer
    User

If the viewer works in configuration as outlined at the beginning of this section, published video delivery can happen both in HTTPS (secure) and HTTP (insecure) modes. In a default configuration, the video delivery protocol strictly follows the delivery protocol of the embedding web page. However, it is possible to force HTTPS video delivery without regard to the protocol used by embedding the web page using the VideoPlayer.ssl configuration attribute. (Video preview in Author mode is always delivered securely over HTTPS.)

Depending on the method of publishing Dynamic Media video that you use in Adobe Experience Manager, the VideoPlayer.ssl configuration attribute is applied differently as demonstrated in the following:

  • If you publish a Dynamic Media video with a URL, you append VideoPlayer.ssl to the URL. For example, to force secure video delivery, you append &VideoPlayer.ssl=on to the end of the following viewer URL example:

    https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/InteractiveVideoViewer.html?asset=%2Fcontent%2Fdam%2Fmarketing%2Fshoppable-video%2Fadobe-axis-demo%2FAdobe_AXIS_V3_GRADED-HD.mp4&config=/etc/dam/presets/viewer/Shoppable_Video_light&serverUrl=https%3A%2F%2Fadobedemo62-h.assetsadobe.com%2Fis%2Fimage%2F&contenturl=%2F&config2=/etc/dam/presets/analytics&videoserverurl=https://gateway-na.assetsadobe.com/DMGateway/public/demoCo&interactivedata=content/dam/_VTT/marketing/shoppable-video/adobe-axis-demo/Adobe_AXIS_V3_GRADED-HD.mp4.svideo.vtt&VideoPlayer.contenturl=https://adobedemo62-h.assetsadobe.com/is/content&VideoPlayer.ssl=on
    

    See also Linking URLs to your Web Application

  • If you publish a Dynamic Media video with embed code, you add VideoPlayer.ssl to the list of other viewer configuration parameters in the embed code snippet. For example, to force HTTPS video delivery, you append &VideoPlayer.ssl=on as in the following example:

    <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" : {
       "VideoPlayer.ssl" : "on",
       "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/adobe-axis-demo/Adobe_AXIS_V3_GRADED-HD.mp4.svideo.vtt",
       "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
       "asset" : "/content/dam/marketing/shoppable-video/adobe-axis-demo/Adobe_AXIS_V3_GRADED-HD.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 must 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 pop-up to viewer container so pop-up works 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>
    

    See also Embedding the Video on a Web Page.

On this page