VideoManagementPro

e-Spirit AG

2020-01-13
Table of Contents

1. Introduction

FirstSpirit can be used to create complex websites that are subject to multiple requirements. These requirements are always individual and project-specific. However, they are also increasingly influenced by the expectations of the website users simply presenting information is no longer sufficient in today's world. On the contrary, websites should also be modern, interactive, and should make an impression.

This is where the VideoManagementPro module comes in, which integrates the VideoManager Pro from MovingIMAGE24 into a FirstSpirit project. The available videos are presented in both FirstSpirit Clients in a report. From this report, videos can be referenced to the page via drag-and-drop.

The VideoManagementPro module therefore provides editors with a convenient way to add videos to a website. They can carry out all the necessary steps within FirstSpirit and do not have to switch between the two systems.

1.1. Technical requirements

At least one technical VideoManager Pro account is required to operate the VideoManagementPro module.

The VideoManagementPro module functions cannot be used in conjunction with the external FirstSpirit preview.

2. Installation and configuration

Various components must be installed and configured in order to use the functions supported by the VideoManagementPro module. The steps to be completed are described in the following sub-chapters.

2.1. Configuring the project component

A project-specific configuration is required in order to use the VideoManagementPro module. It is set up using the project component, which must be added to the project being used. To add the project component, open the ServerManager and select Project propertiesProject components.

Project components in the project properties
Figure 1. Project components in the project properties


A list of all existing project components is displayed in the main panel. Click Add, then select the VideoManagementPro Project Configuration and click OK to confirm your selection. The project component is then added to the list in the main panel and will need to be configured (see figure Project components in the project properties). To configure the project component, select the entry in the list and click Configure to open the associated dialog (see figure Configuration dialog for the project component).

Configuration dialog for the project component
Figure 2. Configuration dialog for the project component


User
The FirstSpirit Server must communicate with the VideoManager Pro during generation. For authentication purposes, a technical movingimage user is required, whose name must be entered in the field. The user must be able to access all videos used in the project. Otherwise, it will not be possible to generate the project in its entirety.
Password
Along with the name, the technical user's password is also required for authentication purposes. It must be specified in this configuration field.
Use this user in the preview
If this option is selected, FirstSpirit will also use the technical user to generate the preview. Otherwise, the editor is prompted in both FirstSpirit Clients to enter their personal VideoManager Pro access data as soon as a video is meant to be shown to them in the preview.
Test configuration & update
Clicking this button verifies the user data entered. If this is incorrect or not available, a corresponding dialog box appears to inform the user that the login has failed. If this is correct, the VideoManager instances are updated/can be edited on the second tab, MI24 VideoManager Pro. The OK button on the configuration dialog also runs the same check when the entries are saved. Once the entries have been saved, a report for selecting a video is available to the editor in both clients.

If the login fails five times in one hour for a valid user name, the account is then locked for one hour. The user is informed of this via e-mail. The account is unlocked automatically after one hour.

Standard MI24 VideoManager Pro
The specified technical movingimage user can potentially have access to multiple VideoManager instances. In this case, the user must select the instance to be used by default for selecting a video on the MI24 VideoManager Pro tab. This is done initially by clicking the Test configuration & update button to call up the list of available instances for the technical user. If only one VideoManager instance has been assigned to the user, it is automatically set as the default value.
Configuration dialog for the project component in VideoManager Pro
Figure 3. Configuration dialog for the project component in VideoManager Pro


Changing the default VideoManager instance can lead to form errors, because the available video players are also defined within the instance. However, the video can still be displayed both in the preview and subsequently when the website is live.

2.2. Adding a web component

A web component needs to be added for the preview and for ContentCreator. To add a web component, open the ServerManager and select Project propertiesWeb components.

Web components in the project properties
Figure 4. Web components in the project properties


Inside the main panel, various tab pages are visible. Each tab page contains a list of the existing web components. For the first tab page selected (preview), click Add, select VideoManagementPro Web Application, and click OK to confirm. Then install and activate the web component on an active web server. The server can be selected using the selection box.

Repeat this process for ContentCreator. The web component is then added to the list in the main panel for both tab pages (see figure Web components in the project properties).

More detailed information on how to add web components is available in the FirstSpirit Documentation for Administrators.

3. Adaptations in the project

Once the various components have been installed and configured, a number of adaptations must be made in the project in order to enable movingimage videos to be embedded. These adaptations are described in the sections that follow using a section template as an example. The template helps with referencing as well as the presentation of videos, and forms the basis for project-specific and complex solutions.

The complete template set can be found in Chapter Appendix A, Template set of the section template.

3.1. Script for requesting embed codes

Embed codes are required to embed movingimage videos into a page. The codes can be requested from VideoManager Pro via the executable GetVideoEmbedCode contained in the VideoManagementPro module. The following parameters are therefore required:

Table 1. Parameters of executable 'GetVideoEmbedCode'
Data typeObject nameDescription

java.util.List

videoIds

The Ids of the videos whose embed codes are to be requested.

java.util.Map

parameters

The parameters which are attached to the request URL. The keys of this map correspond to the keys of the available URL parameters of movingimage.

Currently, only the non-optional parameter player_definition_id is supported.



If the executable is intended for use in a (section) template, a script with the reference name getvideoembedcode must be created:

Script for requesting embed codes. 

#!executable-class
GetVideoEmbedCode

The script must refer to the scope Template. If another scope is selected, errors will occur during generation. It can be adjusted in the script properties.

Scope
Figure 5. Scope


If the option Use this user in the preview is deactivated, the executable prompts the editor in the preview to enter their movingimage access data. This access data is held for the duration of the client session, which means that authentication is only required once.

3.2. Placeholder image

If the option Use this user in the preview is deactivated in the configuration dialog of the project component, an authentication of the editor is required in the preview. A placeholder image will be displayed instead of a video until the editor has completed this. The same applies if the editor does not have view permission for the video.

As the solution proposed in this document is only an example, the placeholder image is not contained in the delivery. Therefore, it must be created manually in conjunction with the section template described in the following chapter and must have the reference name dummy_video.

3.3. Section template

movingimage videos can be integrated into a FirstSpirit project in a wide variety of ways. The best implementation in each case must therefore always be determined on a case-by-case basis, based on the prevailing requirements specific to the project.

The following sections outline this type of implementation based on a section template.

3.3.1. Form

To reference videos in a section template, the template must first have the corresponding form. The minimum requirements for the form are as follows:

  • An FS_INDEX component to save the video Id
  • A component to select the player (e.g., a CMS_INPUT_COMBOBOX)

Furthermore, an FS_BUTTON is contained in the following example form definition, which opens the VideoManager.

Form definition of a section template. 

<CMS_MODULE>
   <FS_INDEX name="st_video" height="1">
      <LANGINFOS>
         <LANGINFO lang="*" label="Video"/>
      </LANGINFOS>
      <SOURCE name="videomanagementpro-fsm/VideoManagementProPlugin"/> </FS_INDEX>

   <CMS_INPUT_COMBOBOX name="st_playerDefinition"
    allowEmpty="no" noBreak="yes" useLanguages="no">
      <CMS_INCLUDE_OPTIONS type="public">
         <LABELS>
            <LABEL lang="*">#item</LABEL>
            <LABEL lang="DE">#item</LABEL>
         </LABELS>
         <NAME>MI24PlayerValueProvider</NAME>
      </CMS_INCLUDE_OPTIONS>
      <LANGINFOS>
         <LANGINFO lang="*" label="Player" description="Player"/>
      </LANGINFOS>
   </CMS_INPUT_COMBOBOX>

   <FS_BUTTON name="st_videoManager" hFill="no" noBreak="no"
    onClick="class:ExternalUrlExecutable" style="button" useLanguages="no">
      <LANGINFOS>
         <LANGINFO lang="*" label="Open VideoManager" description="Open VideoManager"/>
         <LANGINFO lang="DE" label="VideoManager öffnen" description="VideoManager öffnen"/>
      </LANGINFOS>
      <PARAMS>
         <PARAM name="target">#field.st_video</PARAM> </PARAMS>
   </FS_BUTTON>
</CMS_MODULE>

The VideoManagementProPlugin corresponds to the source of the FS_INDEX component. It is essential that it is given in the presented form.

The FS_BUTTON parameter must be assigned the name target and refer to the FS_INDEX component. The identifier must be adjusted to the project if necessary.

If the page template used has an FS_BUTTON itself for creating new sections, videos can be integrated into a new video section by dragging and dropping them onto this button. To enable this, the FS_INDEX component must be set as a Drop Editor in the section properties.

3.3.2. Rules

If each section is only supposed to be capable of capturing one video, the ability to add several elements for the FS_INDEX component must be disabled. This is possible through the following rule:

Rule definition of a section template. 

<RULES>
  <RULE>
    <WITH>
      <EQUAL>
        <PROPERTY name="SIZE" source="st_video"/>
        <NUMBER>0</NUMBER>
      </EQUAL>
    </WITH>
    <DO>
      <PROPERTY name="ADD" source="st_video"/>
    </DO>
  </RULE>
</RULES>

The rule checks whether the number of elements integrated in the input component st_video is equal to zero. If the check returns true, the Add button of the FS_INDEX component is activated. As soon as a video is integrated, the check returns false and the button is grayed out.

3.3.3. Template set

The HTML template set of the section template has a div container on the top level. This controls the presentation of the videos referenced in the FS_INDEX component. In the process, the preview and the generation must each be dealt with separately. After the presentation, a script tag is defined, which reloads required JavaScript functions from MovingIMAGE24.

If a page is supposed to be able to have several video sections, the script tag must be placed in the page template used. Otherwise, it will be integrated for each section and will therefore occur several times on the page.

<div $CMS_VALUE(editorId())$ >
    $CMS_IF(!st_video.empty)$
        $CMS_SET(set_videoIds, st_video.getIdentifiers())$

        $CMS_IF(!#global.preview)$
            $-- Render video --$
        $CMS_ELSE$
            $-- Render video in the preview --$
        $CMS_END_IF$

        <script src="//e.video-cdn.net/v2/embed.js"></script>
    $CMS_END_IF$
</div>

Generation

The executable GetVideoEmbedCode must be executed in order to display a video in the page's generated state. This necessitates the Id of the referenced video and the selected player Id. The call is made by means of the script already presented. The result of the executable is output in another div container.

$CMS_SET(set_params, {"player_definition_id":st_playerDefinition.getKey()})$ ❶
$CMS_RENDER(script:"getvideoembedcode", videoIds: set_videoIds, parameters: set_params)$ ❷

$CMS_IF(!embedCodes.isEmpty)$
    <div id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container"> ❸
        $CMS_VALUE(embedCodes.get(set_videoIds[0]))$ </div>
$CMS_END_IF$

First of all, the Id of the selected player is determined.

The executable GetVideoEmbedCode is then executed.

The div container in which the video is presented is assigned a unique Id.

The embed code is output within this container.

The player in line 4 can assume a defined width via a VideoStill. If this is required, the list of all VideoStills must first be determined and limited to the required resolution.

$CMS_IF(!st_video.values.isEmpty)$
	$CMS_SET(set_videoStill, st_video.values[0].getStill("thumbnail"))$
$CMS_END_IF$

The code for determining the VideoStill must be entered in the above example code before the div tag. The width of the selected player is limited by a CMS_IF, which must be added to the div tag as an additional attribute. This results in the following code for the div tag that opens:

<div id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container" $CMS_IF(!set_videoStill.isNull)$style="width: $CMS_VALUE(set_videoStill.dimension.width)$px;"$CMS_END_IF$>

For additional documentation on the methods and objects used, please see the JavaDoc documentation.

Preview

If the option Use this user in the preview is deactivated in the configuration dialog of the project component, an authentication of the editor is required in the preview. A placeholder image will be displayed instead of a video until the editor has completed this. Furthermore, some videos may be locked for certain user groups. Both cases must be reflected in the FirstSpirit preview.

The VideoManagementPro module functions cannot be used in conjunction with the external FirstSpirit preview.

To do this, another div container is defined as a first step. This has a unique Id and contains either the referenced video or the placeholder image. The following JavaScript functions are then defined:

  • checkUser
  • showVideoDummy
  • renderVideo
  • waitAndRender
<div
    $CMS_VALUE(editorId(editorName:"st_video"))$
    id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container">
</div>
<script>
   $-- Functions --$
</script>

checkUser

The first function, checkUser, checks whether the editor has already been authenticated in the preview or not. Depending on this, the function initiates either the referenced video or placeholder image display.

function checkUser(api, videoIds, sectionTemplateId) {
   api.execute(
      "class:com.espirit.moddev.videomanagementpro.IsUserAuthenticatedExecutable", ❶
         {},
         function (result) {
            if (result.authenticated == "true") {
               renderVideo(api, videoIds, sectionTemplateId); ❷
            } else {
               showVideoDummy(api, videoIds, sectionTemplateId); ❸
            }
         }
   );
}

The executable IsUserAuthenticatedExecutable checks the editor's authentication.

If the editor is already authenticated, the video is presented using the renderVideo function.

Otherwise, the placeholder image is displayed using the showVideoDummy function.

showVideoDummy

The showVideoDummy function adds a placeholder image to the aforementioned div container. The placeholder image is found in the media store under the reference name dummy_video. Furthermore, it defines a function for the onClick event for this image. This event calls the renderVideo function, which triggers the authentication of the editor and the video display.

function showVideoDummy (api, videoIds, sectionTemplateId) {
   for (var videoIndex in videoIds) {
      var videoId = videoIds[videoIndex];
      var dummyVideo = document.createElement("img"); ❶

      dummyVideo.setAttribute('src', '$CMS_REF(media:"dummy_video")$'); ❷
      dummyVideo.onclick = function () { ❸
         renderVideo(api, videoIds, sectionTemplateId); ❹
      };

      var containerId = videoId + "_" + sectionTemplateId + "_container"; var container = document.getElementById(containerId); if (container) {
         container.appendChild(dummyVideo); ❼
      }
   }
}

A new img element is created which contains the placeholder image.

Clicking on the placeholder image triggers the authentication of the editor and the video display.

The aforementioned div container is determined.

The placeholder image is added to the determined div container.

renderVideo

The renderVideo function calls the executable GetVideoEmbedCode. This executable prompts the editor to enter their access data if required and then calls the embed code of the referenced video from movingimage.

After the executable is completed, the function determines the aforementioned div container. If the editor has view permission for the video, the function adds the embed code to the container. Otherwise, the editor is shown a corresponding text.

function renderVideo(api, videoIds, sectionTemplateId) {
   var params = {};
   params['player_definition_id'] = "$CMS_VALUE(st_playerDefinition)$"; ❶
   api.execute( "class:com.espirit.moddev.videomanagementpro.GetVideoEmbedCode",
      { "videoIds": videoIds, "parameters": params },
      function (result) {
         try {
            for (var videoId in result) {
               var containerId = videoId + "_" + sectionTemplateId + "_container"; var container = document.getElementById(containerId); var embedCode = result[videoId];

               if(container) {
                  if (embedCode) {
                     container.innerHTML = embedCode; ❺
                     VideoPlayerCollection.addPlayerById(containerId); ❻
                  } else {
                     container.innerHTML = "You do not have acces rights for this video."; ❼
                  }
               }
            }
         } catch (e) {
            console.error("Error in executable callback handler: " + e);
         }
      }
   );
}

The function first requests the Id of the selected player.

In addition, it executes the executable GetVideoEmbedCode.

It then determines the aforementioned div container for the presentation of the video or message.

If the editor has view permission, the video's embed code is added to the div container.

In addition, the selected player is added.

If the editor does not have view permission, they will see a corresponding message.

waitAndRender

The checkUser, showVideoDummy, and renderVideo functions all have an api parameter which is required to call an executable. Depending on the FirstSpirit Client used, either the object top.WE_API.Common (ContentCreator) or JC_API (SiteArchitect) is transferred for the parameter. As the JC_API is only available after a certain amount of time, the user must first wait for it before executing the described functions. This controls the waitAndRender function, which is only defined in SiteArchitect.

$CMS_IF(!#global.is("WEBEDIT"))$
   function waitAndRender(videoIds, sectionTemplateId) {
      try {
         if (typeof JC_API === "undefined") { ❶
            window.onBrowserInjection = function(name, injected) { if (name === 'JC_API') {
                    checkUser(JC_API, videoIds, sectionTemplateId);
                }
            };
         } else {
            checkUser(JC_API, videoIds, sectionTemplateId); ❸
         }
      } catch (e) {
         console.error("waitAndRender:" + e);
      }
   }
$CMS_END_IF$

The function first checks the availability of JC_API.

If the JC_API is not yet available, the checkUser function is not executed until the time of the corresponding event.

If the JC_API is already initially available, the checkUser function is called immediately.

Finally, a script is required to start the aforementioned functions. This first calls the waitAndRender function in SiteArchitect while also starting directly in ContentCreator with the checkUser function.

try {
   $CMS_IF(#global.is("WEBEDIT"))$
      checkUser( ❶
         top.WE_API.Common,
         $CMS_VALUE(set_videoIds.map(x -> "\"" + x + "\"").toString())$, ❷
         $CMS_VALUE(#this.id)$);
   $CMS_ELSE$
      waitAndRender( ❸
         $CMS_VALUE(set_videoIds.map(x -> "\"" + x + "\"").toString())$, ❹
         $CMS_VALUE(#this.id)$);
   $CMS_END_IF$
} catch (e) {
   console.error(e);
}

The authentication of the editor and therefore the video or placeholder image display can be triggered directly in ContentCreator.

The checkUser function expects the video Id, which must be extracted from the list and inserted in quotation marks.

SiteArchitect must first wait for the JC_API to become available. As described, this controls the waitAndRender function.

4. Use in FirstSpirit

Once the VideoManagementPro module has been installed and the adaptations in the project have been made, different functions for referencing movingimage videos are provided in both FirstSpirit Clients. These functions are equivalent in both clients and are explained step by step in the following using an example. The description focuses on ContentCreator. However, in principle, it is possible to reference a video in both FirstSpirit Clients.

The example is replicable on any page, which, however, must be able to reference the previously created section template.

As the MovingIMAGE24 page is fully responsive, its display is restricted at widths of less than 768 pixels.

4.1. Selecting a video

The module provides a VideoManagementPro report in both SiteArchitect and ContentCreator. This report presents the videos originating from the VideoManager Pro. Initially, the display is restricted to 25 videos. It is expanded dynamically as the user scrolls down until the total number of all available videos is reached. The list can be filtered according to a key word using the search field in the report. Sort criteria can also be specified in the two drop-down lists. By default, the report sorts the videos in descending order by creation date.

If the option Use this user in the preview is deactivated in the configuration dialog of the project component, the editor must first be authenticated before using the report. The user account used to do this and the technical user given in the project component must be assigned to the same main account.

The user used is only permitted to be assigned to a single VideoManager Pro account on MovingIMAGE24 pages. If the user is assigned to more than one account, this will result in restrictions being applied in FirstSpirit.

The report will then only be displayed if the project component added during installation has been fully configured.

The list in the report displays the title and description of a video for each entry. If a video does not have a description, three hyphens are usually visible instead by default. Furthermore, a preview image and the length of the video, as well as the time of the upload and the number of calls are shown in the flyout. The flyout opens automatically when hovering the mouse over a video entry in the report.

Video in the report
Figure 6. Video in the report


4.2. Integrating a video

In this example, a previously selected video can only be integrated into a section which is based on the previously created template.

If the page does not yet have this type of section, this can potentially be created by dragging and dropping the required video onto an FS_BUTTON. This is only possible if the page has an FS_BUTTON for creating sections. Furthermore, the FS_INDEX input component of the section template must be defined as Drop Editor. In this case, the video is automatically integrated into the component. Otherwise, the section must be created manually.

If the page already has a corresponding section, the selected video can be integrated into the FS_INDEX component of the section. This is done by dragging it from the report and dropping it onto the input component in the editing dialog. Alternatively, the component has an Add button which opens a selection dialog. This also lists all the available videos.

The selection is saved using the button of the same name.

4.3. Editing a video

A video originating from the VideoManager Pro is only integrated on a page by reference. This means that no information is stored in a persistent form within the FirstSpirit project. For this reason, any change to a video must be made directly in the VideoManager Pro.

Every entry in the VideoManagementPro report therefore has the External view button (see figure 'External view' button). It appears when hovering over the entry with the mouse and opens the corresponding video for editing in VideoManager Pro. To display the VideoManager Pro, SiteArchitect uses a new tab in the preview area, whereas ContentCreator creates a new browser tab.

The browser may recognize the new tab as a pop-up and block it if the corresponding settings instruct it do so. In this case, the tab display must be enabled manually.

More detailed information about editing a video can be found in the documentation for VideoManager Pro: http://doc.movingimage24.com/display/VPM/Editing+Video+Data

'External view' button
Figure 7. 'External view' button


4.4. Displaying video statistics

Integrating a video onto a page therefore only makes sense if it resonates with the visitors to the live page. It is therefore advisable to check the efficacy of a video at regular intervals. VideoManager Pro therefore gathers statistics for each video; however, these statistics are not available in FirstSpirit straight away.

Instead, the section template described in this document provides an Open VideoManager button (see figure 'Open VideoManager' button). This opens VideoManager Pro (the statistics can be viewed once the video has been selected). The button has no purpose if a video has not yet been referenced. To display the VideoManager Pro, SiteArchitect uses a new tab in the preview area, whereas ContentCreator creates a new browser tab.

The browser may recognize the new tab as a pop-up and block it if the corresponding settings instruct it do so. In this case, the tab display must be enabled manually.

As the MovingIMAGE24 page is fully responsive, its display is restricted at widths of less than 768 pixels.

More detailed information on the statistics can be found in the documentation for VideoManager Pro: http://doc.movingimage24.com/display/VPM/Statistics

'Open VideoManager' button
Figure 8. 'Open VideoManager' button


4.5. Authentication

The FirstSpirit Server must communicate with the VideoManager Pro to generate the videos integrated in the project. This means that a technical user must be specified in the project component configuration dialog. This user can also be used to present the videos in both FirstSpirit Clients. To do this, the option Use this user in the preview, which is also contained in the configuration dialog, must be activated.

The user used is only permitted to be assigned to a single VideoManager Pro account on MovingIMAGE24 pages. If the user is assigned to more than one account, this will result in restrictions being applied in FirstSpirit.

This option is initially deactivated after the VideoManagementPro module has been installed. In this case, an editor must first be authenticated in both FirstSpirit Clients before they are able to use the functions of the VideoManagementPro module. The user account used to do this and the technical user given in the project component must be assigned to the same main account. For authentication, a corresponding dialog opens so that the editor can enter their login data, as soon as they:

  • Open the VideoManagementPro modules report
  • Reference a video via the FS_INDEX component of the section
  • Click on the placeholder image of an integrated video in the preview
Authentication dialog
Figure 9. Authentication dialog


If the login fails, the requested action cannot be performed. Valid access data is held for each editor and only discarded at the end of the client session. This means that authentication is only required once per client session.

If the login fails five times in one hour for a valid user name, the account is then locked for one hour. The user is informed of this via e-mail. The account is unlocked automatically after one hour.

A. Template set of the section template

Complete HTML template set of the example section template. 

<div $CMS_VALUE(editorId())$ >
   $CMS_IF(!st_video.empty)$
      $CMS_SET(set_videoIds, st_video.getIdentifiers())$
      $CMS_IF(!st_video.values.isEmpty)$
         $CMS_SET(set_videoStill, st_video.values[0].getStill("thumbnail"))$
      $CMS_END_IF$

      $CMS_IF(!#global.preview)$
         $CMS_SET(set_params, {"player_definition_id":st_playerDefinition.getKey()})$
         $CMS_RENDER(script:"getvideoembedcode", videoIds: set_videoIds, parameters: set_params)$

         $CMS_IF(!embedCodes.isEmpty)$
             <div
                id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container"
                $CMS_IF(!set_videoStill.isNull)$style="width: $CMS_VALUE(set_videoStill.dimension.width)$px;"$CMS_END_IF$>
                $CMS_VALUE(embedCodes.get(set_videoIds[0]))$
             </div>
         $CMS_END_IF$
      $CMS_ELSE$
         <div
            $CMS_VALUE(editorId(editorName:"st_video"))$
            id="$CMS_VALUE(set_videoIds[0])$_$CMS_VALUE(#this.id)$_container"
            $CMS_IF(!set_videoStill.isNull)$style="width: $CMS_VALUE(set_videoStill.dimension.width)$px;"$CMS_END_IF$>
         </div>

         <script>
            function checkUser(api, videoIds, sectionTemplateId) {
               api.execute(
                  "class:com.espirit.moddev.videomanagementpro.IsUserAuthenticatedExecutable",
                  {},
                  function (result) {
                     if (result.authenticated == "true") {
                        renderVideo(api, videoIds, sectionTemplateId);
                     } else {
                        showVideoDummy(api, videoIds, sectionTemplateId);
                     }
                  }
               );
            }

            function showVideoDummy (api, videoIds, sectionTemplateId) {
               for (var videoIndex in videoIds) {
                  var videoId = videoIds[videoIndex];
                  var dummyVideo = document.createElement("img");
                  dummyVideo.setAttribute('src', '$CMS_REF(media:"dummy_video")$');
                  dummyVideo.onclick = function () {
                     renderVideo(api, videoIds, sectionTemplateId);
                  };
                  var containerId = videoId + "_" + sectionTemplateId + "_container";
                  var container = document.getElementById(containerId);
                  if (container) {
                     container.appendChild(dummyVideo);
                  }
               }
            }

            function renderVideo(api, videoIds, sectionTemplateId) {
               var params = {};
               params['player_definition_id'] = "$CMS_VALUE(st_playerDefinition)$";
               api.execute(
                  "class:com.espirit.moddev.videomanagementpro.GetVideoEmbedCode",
                  { "videoIds": videoIds, "parameters": params },
                  function (result) {
                     try {
                        for (var videoId in result) {
                           var containerId = videoId + "_" + sectionTemplateId + "_container";
                           var container = document.getElementById(containerId);
                           var embedCode = result[videoId];
                           if(container) {
                              if (embedCode) {
                                 container.innerHTML = embedCode;
                                 VideoPlayerCollection.addPlayerById(containerId);
                              } else {
                                 container.innerHTML = "You do not have acces rights for this video.";
                              }
                           }
                        }
                     } catch (e) {
                        console.error("Error in executable callback handler: " + e);
                     }
                  }
               );
            }

            $CMS_IF(!#global.is("WEBEDIT"))$
               function waitAndRender(videoIds, sectionTemplateId) {
                  try {
                     if (typeof JC_API === "undefined") {
                        window.onBrowserInjection = function(name, injected) {
                            if (name === 'JC_API') {
                                checkUser(JC_API, videoIds, sectionTemplateId);
                            }
                        };
                     } else {
                        checkUser(JC_API, videoIds, sectionTemplateId);
                     }
                  } catch (e) {
                     console.error("waitAndRender:" + e);
                  }
               }
            $CMS_END_IF$

            try {
               $CMS_IF(#global.is("WEBEDIT"))$
                  checkUser(
                     top.WE_API.Common,
                     $CMS_VALUE(set_videoIds.map(x -> "\"" + x + "\"").toString())$,
                     $CMS_VALUE(#this.id)$);
               $CMS_ELSE$
                  waitAndRender(
                     $CMS_VALUE(set_videoIds.map(x -> "\"" + x + "\"").toString())$,
                     $CMS_VALUE(#this.id)$);
               $CMS_END_IF$
            } catch (e) {
               console.error(e);
            }
         </script>
      $CMS_END_IF$

      <script src="//e.video-cdn.net/v2/embed.js"></script>

   $CMS_END_IF$
</div>

6. Disclaimer

This document is provided for information purposes only. e-Spirit may change the contents hereof without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. e-Spirit specifically disclaims any liability with respect to this document and no contractual obligations are formed either directly or indirectly by this document. The technologies, functionality, services, and processes described herein are subject to change without notice.