SriAS2 Practice H5P Standalone

Zur Nutzung der SriAS 2 Practice Videos gibt es mehrere Möglichkeiten:

1. Hosten in einem Web-Server
2. Lokales Öffnen ohne Web-Server
3. Einbinden in eigene Webseite

Hosten in einem Web-Server

Die zip-Datei kann direkt in den Hosting-Ordner des Web-Servers entpackt werden und ist mit der enthaltenen index.html ohne weitere Konfiguration lauffähig. Besondere Anforderungen an den Web-Server existieren nicht. Ein einfaches Aufsetzen eines lokalen Web-Servers ist z.B. mit folgenden Programmen möglich:

• Node.js, Modul http-server
• Python 2, Modul SimpleHttpServer
• Python 3, Modul http.server
• XAMPP

Lokales Öffnen ohne Web-Server

Moderne Browser verhindern aus Sicherheitsgründen das Ausführen der Videos, wenn diese nicht von einem Web-Server gehostet werden. Um sich die Videos trotzdem durch ein einfaches Öffnen der Datei index.html angucken zu können, müssen diese Sicherheitseinstellungen geändert werden. Mozilla Firefox erlaubt ein einfaches Umstellen der entsprechenden Einstellung.

1. Öffnen der Webseite about:config
2. Die Warnmeldung bestätigen
3. Nach privacy.file_unique_origin suchen
4. Durch einen Doppelklick den Wert von true auf false ändern

Diese Einstellung sollte nach dem Angucken der Videos wieder zurück auf true geändert werden.

Einbinden in eigene Webseite

Das Einbinden in eine HTML-Datei ist mit folgendem Code möglich, die Datei index.html dient hier als praktisches Beispiel. Die Pfade müssen entsprechend auf den tatsächlichen Ort der gehosteten Dateien angepasst werden.

<!-- Javascript Code zum Einbinden im Kopf oder am Anfang der Seite -->
<script src="/PFAD/ANPASSEN/main.bundle.js" type="text/javascript"></script>         

<div id='h5p-container'></div> <!-- Hier erscheint später der H5P-Inhalt -->

<link rel="stylesheet" href="/PFAD/ANPASSEN/styles/h5p.css"> <!-- Fullscreen fix, siehe https://github.com/tunapanda/h5p-standalone/issues/51 -->
<!-- Javascript Code nach dem div zum Aktivieren des Inhalts -->
<script type="text/javascript">
    const el = document.getElementById('h5p-container');
    const h5pLocation = '/PFAD/ANPASSEN/workspace';
    const options = {
        frameJs: '/PFAD/ANPASSEN/frame.bundle.js',
        frameCss: '/PFAD/ANPASSEN/styles/h5p.css'
    };

    const displayOptions = { // Aussehen von H5P anpassen
        frame: false,
        copyright: true,
        embed: false,
        download: false,
        icon: false,
        export: false
    };

    const h5p = new H5PStandalone.H5P(el, h5pLocation,options, displayOptions);
</script>