3 - Das Template in VideoJS.ss

Die bereitgestellte Datei: templates/Layout/VideoJSPage.ss kannst du jetzt mit den nötigen Inhalten füllen.

1. Öffne die Datei: templates/Layout/VideoJSPage.ss
2. Kopiere den Inhalt der Datei theme/simple/templates/Layout/Page.ss und füge ihn
     in die VideoJSPage.ss ein.
     (Verwendest du ein anderes/eigenes Template verwende deine Page.ss-Datei)

Für die Darstellung des Inhalts wird die Datei Page.ss verwendet, damit können die Html-Elemente, Navigationen und Anzeigen des Templates auch im VideoJS-Modul verwendet werden.

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
    <article>
        <h1>$Title</h1>
        <div class="content">$Content</div>
    </article>
        $Form
        $PageComments
</div>

Der für das VideoJS-Modul notwendige HTML-Code, wird nun ebenfalls in die Datei VideoJS.ss eingefügt.

3. Kopiere den Quellcode für die VideoJS-Einbindung über den "Content".

<% include SideBar %>
<div class="content-container unit lastUnit">
    <article>
        <h1>$Title</h1>
    
    <script src="videojs/javascript/video.js"></script>
    <div class="videoholder">
      <video id="$Title" class="video-js vjs-default-skin" controls preload="none" width="$Videobreite" height="$Videohoehe"
      poster="assets/video/$VideoOrdner/$Vorschaubild"
      data-setup="{}">
        <source src="assets/video/$VideoOrdner/$VideodateiMP4" type="video/mp4" />
        <source src="assets/video/$VideoOrdner/$VideodateiOGG" type="video/ogg" />
      </video>
  </div>
    
    <div class="content">$Content</div>
    </article>
        $Form
        $PageComments
</div>

4. Starte deine Silverstripe-Installation neu, mit "dev/build"
Erneuere den Silverstripe-Cache auch im Backend mit "... admin?flush=1", so stellst du sicher, dass die zusätzlichen Dateien des Moduls: videojs.css, video.js aktualisiert werden.

Weiter, um das Modul mit Videodateien, Vorschaubild und korrekten Pfaden zu testen.