Unter Verwendung der im ZIP-File bereitgestellten Informationen bzw. Anwendungen, lassen sich die im Forschungsverbund zur Selbstregulation im Alltag von Studierenden (SriAS 2 Practice, gefördert vom BMBF) produzierten Kurzvideos miteinander verknüpfen. Sofern die vier Videos der Serie (siehe Verweise zur Relation) gemeinsam präsentiert werden sollen, lässt sich die Verknüpfung unter Verwendung der hier bereitgestellten Sekundärinformation umsetzen.

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.

    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>