FirstSpirit™ VideoManagement

Die hier beschriebene Erweiterung stellt einem Redakteur im FirstSpirit JavaClient die folgenden Funktionen zur Verfügung:

Für die Nutzung des VideoManagements in FirstSpirit wird ein MovingIMAGE24-Account benötigt, der direkt von MovingImage24 zu beziehen ist.

Des Weiteren muss das FirstSpirit-Projekt um die im Kapitel Eingabekomponenten beschriebene Absatzvorlage erweitert werden, über die das Hinzufügen eines Videos in die Seite erfolgt und welche die entsprechende Funktionalität im Vorschaubereich des FirstSpirit JavaClients bereitstellt.

Ausführliche Informationen zur Installation eines FirstSpirit-Servers finden Sie in der FirstSpirit Installationsanleitung. Es wird mindestens die Version 4.2.437 benötigt. Ältere FirstSpirit-Versionen werden nicht unterstützt.

Zur Nutzung des VideoManagement-Moduls in FirstSpirit wird ein gültiger MovingIMAGE24-Account vorausgesetzt. Des Weiteren werden der dem Account zugehörige API- und der Developer-Key benötigt. Beide werden nach der Erstellung eines Accounts per E-Mail übermittelt.

Wichtige technische Voraussetzung:
Für den verwendeten MovingImage24 Account muss die API-Schnittstelle von MovingImage24 mit lizenziert worden sein.
Für den Videomanager Account fallen zusätzliche Kosten an.

Öffnen Sie für die Installation des Moduls den Server-Manager und wählen Sie den Bereich Server-Eigenschaften → Module.

Abbildung 1. Module-Liste in den Servereigenschaften

Im Hauptpanel ist eine Liste der auf dem FirstSpirit-Server installierten Module zu sehen. Wählen Sie nach dem Klicken auf Installieren die mitgelieferte videomanagement-<VERSIONSNUMMER>.fsm aus und bestätigen Sie die Auswahl mit Öffnen.

Während der Installation werden Sie darauf hingewiesen, dass das Modul einen Dienst enthält und gefragt, ob dieser Dienst automatisch gestartet werden soll. Das Modul benötigt den Service zur Kommunikation mit MovingImage24, weshalb es empfehlenswert ist, ihn automatisch zu starten.

Nachdem die Installation beendet wurde, ist ein neuer Ordner VideoManagement in der Module-Übersicht hinzugefügt worden. Wählen Sie den Eintrag aus, klicken Sie auf Konfigurieren, setzen Sie den Haken Alle Rechte und bestätigen Sie Ihre Änderung. Schließen Sie nun die Servereigenschaften durch Klicken auf OK. Weitere Informationen zur Installation von Modulen finden Sie in der FirstSpirit Dokumentation für Administratoren.

Das Modul muss zunächst dem Projekt hinzugefügt werden, das Sie um die VideoManagement-Funktionalität erweitern möchten, bevor die projektspezifische Konfiguration möglich ist. Öffnen Sie dazu die Projektkonfiguration durch Doppelklick auf das entsprechende Projekt in der Projektübersicht.

Abbildung 2. Komponenten in den Projekteigenschaften

Wählen Sie auf der linken Seite den Bereich Projekt-Komponenten aus. Hier wird die Liste der Module angezeigt, die diesem Projekt hinzugefügt wurden. Klicken Sie auf Hinzufügen und wählen Sie VideoManagementProjectConfiguration aus. Nun muss die Liste der Projekt-Komponenten um den entsprechenden Eintrag ergänzt worden sein.

Durch Doppelklick auf die Projekt-Komponente VideoManagementProjectConfiguration öffnet sich der Konfigurationsdialog. Die folgenden Eigenschaften müssen konfiguriert werden:

Abbildung 3. Modulkonfiguration.

Die URL des Webservices von MovingImage24 kann im Konfigurationsdialog des Dienstes MovingImage24ApiService vorgenommen werden, der mit dem Modul installiert wurde (siehe Abbildung Webservice-URL-Konfiguration.). Bei der Installation des Moduls wird ein Standardwert für diese Option gesetzt, der für gewöhnlich beibehalten werden kann.

Abbildung 4. Webservice-URL-Konfiguration.

Erfolgen alle Zugriffe aufs Internet über einen Proxy-Server, so muss dieser Proxy-Server und ggf. Authentifizierungsinformation dem Modul bekannt gemacht werden. Dies geschieht über den Konfigurationsdialog des Dienstes MovingImage24ApiService, der mit dem Modul installiert wurde (siehe Abbildung Proxyeinstellungen.).

Abbildung 5. Proxyeinstellungen.

Soll speziell für dieses Modul ein anderer Proxy verwendet werden, so kann über über den erwähnten Konfigurationsdialog ein Proxy angegeben werden, der nur vom VideoManagement-Modul verwendet wird.

Wichtig ist weiterhin, dass die folgenden Service-Domains im Proxy freigegeben werden:

Es besteht auch die Möglichkeit, die Wildcard * zu verwenden:

Werden die Domains nicht freigeschaltet, kann eine Exception der folgenden Art auftreten:

java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
  at java.util.LinkedList.entry(Unknown Source)
  at java.util.LinkedList.get(Unknown Source)
  at de.espirit.firstspirit.opt.pm.video.VideoService.handleDrop(VideoService.java:202)
  at de.espirit.firstspirit.opt.pm.video.HandleVideoDropExecutable.handleDrop(HandleVideoDropExecutable.java:39)
  at de.espirit.firstspirit.opt.pm.video.HandleVideoDropExecutable.execute(HandleVideoDropExecutable.java:28)
  at de.espirit.firstspirit.opt.pm.video.HandleVideoDropExecutable.execute(HandleVideoDropExecutable.java:20)

Für jedes in FirstSpirit referenzierte Video wird ein Stellvertreterobjekt im Medienbereich abgelegt, das die Metadaten des Videos enthält. In der Metadaten-Vorlagen des Projektes müssen dazu einige Eingabekomponenten ergänzt werden. Existiert noch keine Metadaten-Vorlage im Projekt, so ist diese anzulegen.

Die notwendigen Erweiterungen der Metadaten-Vorlage sind im Anhang Erweiterung der Metadaten-Vorlage aufgeführt.

Weitere Informationen zur Metadaten-Vorlage finden Sie in der FirstSpirit Dokumentation für Administratoren.

Das Modul installiert eine Absatzvorlage VideoManagement Beispielabsatz im Projekt, die als Vorlage für die konkrete Umsetzung im Projekt dienen soll. Die Vorlage sollte nicht direkt genutzt werden, da sie bei einer Aktualisierung des Moduls überschrieben werden kann. Die Vorlage ist sofort funktionsfähig, besonders die Ausgabe muss aber auf die Anforderungen im Projekt angepasst werden.

Die Absatzvorlage besteht aus verschiedenen Eingabekomponenten, die hier einzeln aufgeführt werden.

<CMS_INPUT_COMBOBOX name="st_video_skin" useLanguages="no">
    <ENTRIES>
        <ENTRY value="1">
            <LANGINFOS>
                <LANGINFO lang="*" label="Fully featured (content area, 500x307)" />
            </LANGINFOS>
        </ENTRY>
        <ENTRY value="2">
            <LANGINFOS>
                <LANGINFO lang="*" label="Recommended features (content area, 500x307)" />
            </LANGINFOS>
        </ENTRY>
    </ENTRIES>
    <LANGINFOS>
        <LANGINFO lang="*" label="Player skin" description="Please select the player skin" />
    </LANGINFOS>
</CMS_INPUT_COMBOBOX>

<FS_REFERENCE
  name="st_video"
  imagePreview="yes"
  noBreak="no"
  upload="no">
  <FILTER>
    <HIDE type="all"/>
    <ALLOW type="picture"/>
  </FILTER>
  <LANGINFOS>
   <LANGINFO lang="*" label="Video" description="Insert a video"/>
  </LANGINFOS>
   <PROJECTS>
     <LOCAL name=".">
       <SOURCES>
         <FOLDER name="movingimage24" store="mediastore"/>
       </SOURCES>
     </LOCAL>
   </PROJECTS>
</FS_REFERENCE>

Die Absatzvorlage stellt den Code bereit, der zur Einbindung eines Videos in eine Seite erforderlich ist. Zusätzlich wird der Titel des Videos als Überschrift ausgegeben. Sollte im Projekt die Ausgabe von weiteren Metadaten (Länge des Videos, Schlagwörter etc.) gewünscht sein, so ist dies über die gleichen Mechanismen möglich. Den kompletten Quelltext des Ausgabekanals finden Sie im Anhang HTML Ausgabekanal der Absatzvorlage Video-Streaming.

Um die Stellvertreterobjekte für die Medien nicht im lokalen, sondern in einem Remote-Projekt speichern zu können, müssen diverse Anpassungen vorgenommen werden.

Im Remote Media Projekt:

Im Projekt, in dem Remote-Medien für das VideoManagement genutzt werden sollen:

<FS_BUTTON
  name="st_dropTarget"
  icon="media:droptargeticon"
  noBreak="no"
  onDrop="class:VideoManagementHandleDropExecutable"
  style="link">

    <DROPTYPES>
        <MIME type="application/fs_video" classname="de.espirit.common.util.Pair" />
    </DROPTYPES>
    <LANGINFOS>
        <LANGINFO lang="*" label="" />
    </LANGINFOS>
    <PARAMS>
        <PARAM name="target">#field.st_video</PARAM>
        <PARAM name="remoteProject">mithras</PARAM>
    </PARAMS>
</FS_BUTTON>

Sind die Anpassungen vorgenommen, so werden nach dem Drag and Drop aus MovingImage24 die Medien im Remote-Media-Projekt angelegt und nicht im lokalen Projekt. Auch das Metadaten-Synchronisierungsskript kann im Remote-Projekt regulär genutzt werden.

Für die Thumbnails wird die höchste, von MovingImage24 zur Verfügung gestellte Auflösung (512x288 Pixel) verwendet. Werden andere Auflösungen benötigt, kann dies über die bekannten FirstSpirit Auflösungen realisiert werden (siehe FirstSpirit Dokumentation für Administratoren).

Das Hinzufügen eines Videos kann auf zwei Wegen erfolgen.

Soll ein Video verwendet werden, welches bereits an anderer Stelle in FirstSpirit eingebunden ist bzw. schon einmal eingebunden wurde, so kann dieses über den Ordner-Button ausgewählt werden.

Abbildung 7. Unterschiedliche Möglichkeiten zum Hinzufügen eines Videos

Andernfalls lässt sich die MovingIMAGE24-Seite über den Button MI24 Öffnen aufrufen, die sich als neuer Tab im Vorschaubereich öffnet. Da noch kein Video ausgewählt wurde, erscheint eine Übersicht unterschiedlicher Videos, welche über die Suche im oberen Bereich der Seite auf bestimmte, zu einem Suchbegriff passende, Vorschläge eingegrenzt werden kann.

Das gewünschte Video lässt sich per Drag and Drop des roten Bereichs auf den dafür vorgesehenen Bereich im Formular ziehen und so in den Absatz integrieren.

Abbildung 8. Drag & Drop Klickbereich

Im Ordner Movingimage24 in der Medien-Verwaltung erscheint daraufhin ein Thumbnail des ausgewählten Videos, dessen weiterführende Informationen im Reiter Media in den Metadaten des Thumbnails übernommen wurden.

Abbildung 9. Weiterführende Informationen eines Videos in den Metadaten

Die Videos können den auf der linken Seite gelisteten unterschiedlichen Channels durch Drag & Drop zugordnet werden, indem man den grün markierten Bereich eines Video-Thumbnails auf den jeweiligen Channel fallen lässt.

Die weiterführenden Informationen eines Videos können innerhalb des Videomanagers über den Button Bearbeiten editiert werden. Dieser Button öffnet die zugehörige Detailseite des ausgewählten Videos in einem neuen Tab im Vorschaubereich.

Abbildung 10. Video-Detailseite zum Bearbeiten der weiterführenden Informationen

Wurde ein Video wie im Kapitel Video editieren editiert und wurden seine Metadaten damit verändert, synchronisieren sich diese in FirstSpirit nicht selbstständig. Eine solche Aktualisierung muss manuell durch den Redakteur erfolgen, wenn keine regelmäßige Aktualisierung über ein Auftragsskript eingerichtet wurde.

Die Metadaten des aktuell in der Eingabekomponente referenzierten Videos lassen sich über den Button Metadaten synchronisieren aktualisieren. Auf der Abbildung Metadaten synchronisieren würden somit beispielsweise die Metadaten des Videos mit dem Referenznamen mi24_23554 aktualisiert.

Abbildung 11. Metadaten synchronisieren

Für die gleichzeitige Aktualisierung der Metadaten aller in FirstSpirit hinterlegten Videos wurde mit dem Modul außerdem ein Skript bereitgestellt (siehe Kapitel Synchronisation über den FirstSpirit Client).

Zum Austausch eines Videos stehen zwei Wege zur Verfügung.

Ein bereits in FirstSpirit vorhandenes Video lässt sich über den Ordner-Button auswählen.

Andernfalls wird über den Button MI24 Öffnen die MovingIMAGE24-Detailseite des bestehenden Videos in einem zusätzlichen Tab im Vorschaubereich geöffnet. Der Link Videoliste öffnet eine Übersicht aller Videos, aus welcher ein neues Video gewählt und per Drag & Drop auf den brombeerfarbenen Button hinzugefügt werden kann.

Der Button Statistik ermöglicht es, die von MovingIMAGE24 bereitgestellten Statistiken zu dem im Absatz ausgewählten Video in einem zusätzlichen Tab in der FirstSpirit-Vorschau zu öffnen.

Abbildung 12. MovingIMAGE24-Statistik zu einem ausgewählten Video

In diesem Tab werden bereits automatisch verschiedene Statistiken angezeigt, für die unterschiedliche Betrachtungszeiträume gewählt werden können. Des Weiteren steht ein Export der Statistiken zur Verfügung.

Der Synchronisationsprozess kann vom Redakteur manuell entweder für das jeweils aktuell in der Eingabekomponente referenzierte Video oder für alle in FirstSpirit vorhandenen Videos angestoßen werden.

Für die Aktualisierung der Metadaten aller in FirstSpirit hinterlegten Videos stellt das Modul das Skript Metadaten synchronisieren zur Verfügung, welches über Extras → Skript ausführen → VideoManagement gestartet werden kann.

Die Aktualisierung der Metadaten des jeweils nur referenzierten Videos erfolgt über den Button Metadaten synchronisieren (siehe Kapitel Metadaten synchronisieren).

In vielen Szenarien ist es gewünscht, die Synchronisation automatisiert und regelmäßig vorzunehmen. Das Modul stellt dafür ein Skript zur Verfügung, was innerhalb von Aufträgen verwendet werden kann. Bei der Verwendung des Skriptes muss in den Eigenschaften der Aktion eine eigene Verbindung definiert werden. Der verwendete Benutzer muss die notwendigen Rechte haben, um die Stellvertreterobjekte in der Medien-Verwaltung zu ändern, löschen und freigeben zu können.

Für das Auftragsskript sind die folgenden Anwendungsszenarien denkbar.

Bei der Synchronisation des VideoManagers und FirstSpirit kann die Situation auftreten, dass ein Video im VideoManager gelöscht wurde, das Video aber innerhalb von FirstSpirit noch verwendet wird. Dieser Konflikt kann nicht automatisiert gelöst werden, ein Redakteur muss diesen Konflikt bereinigen, indem er:

Um den Redakteur zu unterstützen, stellt das Modul den Arbeitsablauf VideoManagement Konflikt lösen zur Verfügung, der auf dem Stellvertreterobjekt des Videos in FirstSpirit gestartet wird. So erhalten die zuständigen Redakteure eine entsprechende Aufgabe und ggf. eine Benachrichtigung per E-Mail.

Sofern ein komplexerer Arbeitsablauf gewünscht wird, kann in der Projektkonfiguration des Moduls auch ein eigener Arbeitsablauf definiert werden.

 <CMS_INPUT_TEXT name="m_video_name" hFill="yes" noBreak="no" singleLine="yes" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Titel" description="video title"/>
      <LANGINFO lang="DE" label="Title" description="Titel des Videos"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

 <CMS_INPUT_TEXT name="m_video_source" hFill="yes" length="10" noBreak="no" singleLine="yes" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Media source " description="Insert a media source comment"/>
      <LANGINFO lang="DE" label="Medienquelle" description="Geben Sie Informationen zur Medienquelle ein"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

  <CMS_INPUT_TEXT name="m_video_displayDate" hFill="yes" length="20" noBreak="no" singleLine="yes" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Date" description="Insert a date string"/>
      <LANGINFO lang="DE" label="Datum" description="Datum des Videos"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

  <CMS_INPUT_TEXT name="m_video_id" hFill="yes" length="10" noBreak="no" singleLine="yes" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Media ID" description="Insert the media ID"/>
      <LANGINFO lang="DE" label="Medien-ID" description="Geben Sie die Medien-ID ein"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

  <CMS_INPUT_TEXT name="m_video_length" hFill="yes" length="10" noBreak="no" singleLine="yes" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Length" description="Length of the video"/>
      <LANGINFO lang="DE" label="Länge" description="Länge des Videos"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

  <CMS_INPUT_TEXTAREA name="m_video_keywords" hFill="yes" rows="5" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Keywords" description="Insert keywords"/>
      <LANGINFO lang="DE" label="Schlagworte" description="Geben Sie inhaltliche Schlagworte an"/>
    </LANGINFOS>
  </CMS_INPUT_TEXTAREA>

  <CMS_INPUT_TEXT name="m_video_url" hFill="yes" hidden="yes" noBreak="yes" singleLine="yes" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Media URL" description="Insert the media URL"/>
      <LANGINFO lang="DE" label="Medien-URL" description="Geben Sie den Medien-URL ein"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

  <CMS_INPUT_TEXT
    name="m_video_thumbnailUrl"
    hFill="yes"
    hidden="yes"
    noBreak="yes"
    singleLine="yes"
    useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="Thumbnail URL" description="Insert the media URL"/>
      <LANGINFO lang="DE" label="Thumbnail-URL" description="Geben Sie den Thumbnail-URL ein"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

 <CMS_MODULE>

  <CMS_GROUP tabs="top">

    <CMS_GROUP>
      <LANGINFOS>
        <LANGINFO lang="*" label="Video selection"/>
        <LANGINFO lang="DE" label="Videoauswahl"/>
      </LANGINFOS>

      <CMS_INPUT_COMBOBOX name="st_video_skin" useLanguages="no">
        <ENTRIES>
          <ENTRY value="1">
            <LANGINFOS>
              <LANGINFO lang="*" label="Fully featured (content area, 500x307)"/>
              <LANGINFO lang="DE" label="Vollausgestattet (Inhaltebereich, 500x307)"/>
            </LANGINFOS>
          </ENTRY>
          <ENTRY value="2">
            <LANGINFOS>
              <LANGINFO lang="*" label="Recommended features (content area, 500x307)"/>
              <LANGINFO lang="DE" label="Empfohlener Funktionsumfang (Inhaltebereich, 500x307)"/>
            </LANGINFOS>
          </ENTRY>
          <ENTRY value="3">
            <LANGINFOS>
              <LANGINFO lang="*" label="No features (content area, 500x307)"/>
              <LANGINFO lang="DE" label="Keine Bedienelemente (Inhaltebereich, 500x307)"/>
            </LANGINFOS>
          </ENTRY>
          <ENTRY value="4">
            <LANGINFOS>
              <LANGINFO lang="*" label="No features, with autostart (marginal area)"/>
              <LANGINFO lang="DE" label="Keine Bedienelemente, mit Autostart (Marginalspalte)"/>
            </LANGINFOS>
          </ENTRY>
          <ENTRY value="5">
            <LANGINFOS>
              <LANGINFO lang="*" label="No features, without autostart (marginal area)"/>
              <LANGINFO lang="DE" label="Keine Bedienelemente, ohne Autostart (Marginalspalte)"/>
            </LANGINFOS>
          </ENTRY>
        </ENTRIES>
        <LANGINFOS>
          <LANGINFO lang="*" label="Player skin" description="Please select the player skin"/>
          <LANGINFO lang="DE" label="Player-Skin" description="Bitte den Player-Skin wählen"/>
        </LANGINFOS>
      </CMS_INPUT_COMBOBOX>

      <FS_REFERENCE
        name="st_video"
        allowEmpty="no"
        hFill="no"
        imagePreview="yes"
        noBreak="no"
        upload="no"
        useLanguages="no">
        <FILTER>
          <HIDE type="all"/>
          <ALLOW type="picture"/>
        </FILTER>
        <LANGINFOS>
          <LANGINFO lang="*" label="Video" description="Insert a video"/>
          <LANGINFO lang="DE" label="Video" description="Wählen Sie hier ihr Video aus"/>
        </LANGINFOS>
        <PROJECTS>
          <LOCAL name=".">
            <SOURCES>
              <FOLDER name="movingimage24" store="mediastore"/>
            </SOURCES>
          </LOCAL>
        </PROJECTS>
      </FS_REFERENCE>

      <FS_BUTTON
        name="st_showVideo"
        icon="media:selectfile"
        noBreak="yes"
        onClick="class:VideoManagementOpenVideoAppExecutable"
        style="firstspirit">
        <LANGINFOS>
          <LANGINFO lang="*" label="Open MI24"/>
          <LANGINFO lang="DE" label="MI24 Öffnen"/>
        </LANGINFOS>
        <PARAMS>
          <PARAM name="target">#field.st_video</PARAM>
        </PARAMS>
      </FS_BUTTON>

      <FS_BUTTON
        name="st_editVideo"
        icon="media:edit"
        noBreak="yes"
        onClick="class:VideoManagementOpenEditVideoExcecutable"
        style="firstspirit">
        <LANGINFOS>
          <LANGINFO lang="*" label="Edit"/>
          <LANGINFO lang="DE" label="Editieren"/>
        </LANGINFOS>
        <PARAMS>
          <PARAM name="target">#field.st_video</PARAM>
        </PARAMS>
      </FS_BUTTON>

      <FS_BUTTON
        name="st_showStatistics"
        icon="media:overlay_statistik"
        noBreak="yes"
        onClick="class:VideoManagementOpenStatisticsExecutable"
        style="firstspirit">
        <LANGINFOS>
          <LANGINFO lang="*" label="Statistics"/>
          <LANGINFO lang="DE" label="Statistik"/>
        </LANGINFOS>
        <PARAMS>
          <PARAM name="target">#field.st_video</PARAM>
        </PARAMS>
      </FS_BUTTON>

      <FS_BUTTON
        name="st_syncMeta"
        alwaysEnabled="yes"
        icon="media:mi24_sync"
        noBreak="yes"
        onClick="class:VideoManagementSyncVideoMetadataExecutable"
        style="firstspirit">
        <LANGINFOS>
          <LANGINFO lang="*" label="Synchronize metadata"/>
          <LANGINFO lang="DE" label="Metadaten synchronisieren"/>
        </LANGINFOS>
        <PARAMS>
          <PARAM name="target">#field.st_video</PARAM>
        </PARAMS>
      </FS_BUTTON>

      <FS_BUTTON
        name="st_dropTarget"
        icon="media:droptargeticon"
        noBreak="no"
        onDrop="class:VideoManagementHandleDropExecutable"
        style="link">
        <DROPTYPES>
          <MIME type="application/fs_video" classname="de.espirit.common.util.Pair"/>
        </DROPTYPES>
        <LANGINFOS>
          <LANGINFO lang="*" label=""/>
        </LANGINFOS>
        <PARAMS>
          <PARAM name="target">#field.st_video</PARAM>
        </PARAMS>
      </FS_BUTTON>

    </CMS_GROUP>

    <CMS_GROUP>
      <LANGINFOS>
        <LANGINFO lang="*" label="Video settings"/>
        <LANGINFO lang="DE" label="Videoeinstellungen"/>
      </LANGINFOS>
      <CMS_LABEL bold="no" size="12">
        <LANGINFOS>
          <LANGINFO lang="*" label="These settings will override the corresponding values in the predefined player skins"/>
          <LANGINFO lang="DE" label="Diese Einstellungen überschreiben die entsprechenden Werte innerhalb der vordefinierten Player-Skins"/>
        </LANGINFOS>
      </CMS_LABEL>

      <CMS_INPUT_TEXT name="st_video_width" hFill="yes" singleLine="no" useLanguages="no">
        <LANGINFOS>
          <LANGINFO lang="*" label="Width"/>
          <LANGINFO lang="DE" label="Breite"/>
        </LANGINFOS>
      </CMS_INPUT_TEXT>

      <CMS_INPUT_TEXT name="st_video_height" hFill="yes" singleLine="no" useLanguages="no">
        <LANGINFOS>
          <LANGINFO lang="*" label="Height"/>
          <LANGINFO lang="DE" label="Höhe"/>
        </LANGINFOS>
      </CMS_INPUT_TEXT>

    </CMS_GROUP>

  </CMS_GROUP>

$--
  this section ships as a sample with the VideoIntegration module
  It displays the heading of the referenced video and uses the javascript based invocation code

  You should create your own section template for your project, as this template may be overwritten during a VideoIntegration module update
--$

<div>
  $-- get title from the linked video and display it as the heading --$

  $CMS_IF(!st_video.media.meta.get("m_video_name").empty &&
          !st_video.media.meta.get("m_video_name").getEditor().get(#global.language).empty)$
  <h3 style="margin: 0 0 10px 0;">
    $CMS_VALUE(st_video.media.meta.get("m_video_name").getEditor().get(#global.language))$
  </h3>
  $CMS_END_IF$

    $-- use invocation code base on the choosen presets --$

  $CMS_IF(!st_video.media.meta.get("m_video_id").empty &&
          !st_video.media.meta.get("m_video_id").getEditor().get(#global.language).empty)$
    $CMS_IF(st_video_skin.equals("2"))$
      <div style="width:500px">
        <div>
          <script type="text/javascript" src='https://www.edge-cdn.net/videojs_$CMS_VALUE(st_video.media.meta.get("m_video_id").getEditor().get(#global.language))$?width=$CMS_VALUE(st_video_width,default:"500")$&height=$CMS_VALUE(st_video_height,default:"307")$&player=v2&scwm=4&adbtn=0&adbtn2=0&adbtn5=0&chapter=0&overlays=0&cbarPlayPauseFlag=0&cbarTrackFlag=1&cbarTimeTotalFlag=1&cbarTimeDurationFlag=1&cbarvolumeBarFlag=1&volumeBtn=0&cbarFullScreenFlag=0&bg=D7DBE3&bg2=D7DBE3&ctlstyle=none&fg=2f3745&ctcb1=2f3745&ctcb2=ffffff&ctcb3=ffffff&ctcb4=ffffff&ctcb5=ffffff&ctcb6=807e7e&ctcb7=424141&ctg1=393838&ctg2=b2b1b1&ctg3=ffffff&ctg4=000000&ctg5=70&ctab1=969595&ctab2=424141&ctab3=a1a0a0&ctab4=747373&ctab5=ffffff&ctab6=ffffff&lc=000000&start=0&volume=70&thumbasfs=0&loadtime=0&wmode=window&fupdate=1&cwm=0&ctp=0&qd=2'>
          </script>
        </div>
      </div>
    $CMS_ELSIF(st_video_skin.equals("3"))$
      <div style="width:500px">
        <div>
          <script type="text/javascript" src='https://www.edge-cdn.net/videojs_$CMS_VALUE(st_video.media.meta.get("m_video_id").getEditor().get(#global.language))$?width=$CMS_VALUE(st_video_width,default:"500")$&height=$CMS_VALUE(st_video_height,default:"307")$&player=v2&scwm=4&adbtn=0&adbtn2=0&adbtn5=0&chapter=0&overlays=0&cbarPlayPauseFlag=0&cbarTrackFlag=0&cbarTimeTotalFlag=0&rtimer=1&cbarTimeDurationFlag=0&cbarvolumeBarFlag=0&volumeBtn=0&cbarFullScreenFlag=0&qs=2&bg=D7DBE3&bg2=D7DBE3&ctlstyle=none&fg=2f3745&ctcb1=2f3745&ctcb2=ffffff&ctcb3=ffffff&ctcb4=ffffff&ctcb5=ffffff&ctcb6=807e7e&ctcb7=424141&ctg1=393838&ctg2=b2b1b1&ctg3=ffffff&ctg4=000000&ctg5=70&ctab1=969595&ctab2=424141&ctab3=a1a0a0&ctab4=747373&ctab5=ffffff&ctab6=ffffff&lc=000000&start=0&volume=70&thumbasfs=0&loadtime=0&wmode=window&fupdate=1&cwm=0&ctp=0&qd=2'>
          </script>
        </div>
      </div>
    $CMS_ELSE$
      <div style="width:500px">
        <div>
          <script type="text/javascript" src='https://www.edge-cdn.net/videojs_$CMS_VALUE(st_video.media.meta.get("m_video_id").getEditor().get(#global.language))$?width=$CMS_VALUE(st_video_width,default:"500")$&height=$CMS_VALUE(st_video_height,default:"307")$&player=v2&scwm=4&adbtn=0&adbtn2=0&adbtn5=0&chapter=1&overlays=1&cbarPlayPauseFlag=1&cbarTrackFlag=1&cbarTimeTotalFlag=1&cbarTimeDurationFlag=1&cbarvolumeBarFlag=1&volumeBtn=1&cbarFullScreenFlag=1&bg=D7DBE3&bg2=D7DBE3&ctlstyle=none&fg=2f3745&ctcb1=2f3745&ctcb2=ffffff&ctcb3=ffffff&ctcb4=ffffff&ctcb5=ffffff&ctcb6=807e7e&ctcb7=424141&ctg1=393838&ctg2=b2b1b1&ctg3=ffffff&ctg4=000000&ctg5=70&ctab1=969595&ctab2=424141&ctab3=a1a0a0&ctab4=747373&ctab5=ffffff&ctab6=ffffff&lc=000000&start=0&volume=70&thumbasfs=0&loadtime=0&wmode=window&fupdate=1&cwm=0&ctp=0&qd=2'>
          </script>
        </div>
      </div>
    $CMS_END_IF$
  $CMS_END_IF$
</div>

#!executable-class
VideoManagementSyncVideoMetadataExecutable