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.
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. |
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.
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 →
.
A list of all existing project components is displayed in the main panel. Click VideoManagementPro Project Configuration
and click 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 to open the associated dialog (see figure Configuration dialog for the project component).
MI24 VideoManager Pro
. The 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. |
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. |
A web component needs to be added for the preview
and for ContentCreator
. To add a web component, open the ServerManager
and select →
.
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 , select VideoManagementPro Web Application
, and click 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.
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. |
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:
Data type | Object name | Description |
---|---|---|
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 |
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 Figure 5. Scope |
If the option |
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
.
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.
To reference videos in a section template, the template must first have the corresponding form. The minimum requirements for the form are as follows:
FS_INDEX
component to save the video Id
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 | |
The |
If the page template used has an |
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 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.
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 |
<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 | |
The | |
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:
<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 | |
If the editor is already authenticated, the video is presented using the | |
Otherwise, the placeholder image is displayed using the |
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 | |
Clicking on the placeholder image triggers the authentication of the editor and the video display. | |
The aforementioned | |
The placeholder image is added to the determined |
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 | |
It then determines the aforementioned | |
If the editor has view permission, the video's embed code is added to the | |
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 | |
If the | |
If the |
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 | |
SiteArchitect must first wait for the |
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. |
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 |
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.
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 button which opens a selection dialog. This also lists all the available videos.
The selection is saved using the button of the same name.
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 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
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 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
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:
FS_INDEX
component of the section
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. |
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>
The VideoManagementPro module is a product of e-Spirit AG, Dortmund, Germany.
Only a license agreed upon with e-Spirit AG is valid with respect to the user for using the module.
Details regarding any third-party software products in use but not created by e-Spirit AG, as well as the third-party licenses and, if applicable, update information can be found in the file THIRD-PARTY.txt
included with the module.
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.