Anwendungsbeispiel H5P Inhalte einbetten

Zuletzt geändert von Carina Enke am 17.01.2024

 

H5P-Inhalte die per URL frei und ohne Anmeldung im Internet verfügbar sind, können über den Texteditor per Einbettungscode an vielen Stellen der Lernplattform eingebunden werden. Der Inhalt ist somit direkt im Kurs anzeigbar, wenn Browsereinstellungen oder andere technische Einschränkungen dies nicht unterbinden. Als Beispiel wird auf dieser Seite die Einbettung des H5P Beispielinhalts "Food Photography Example" beschrieben. Dieser Inhalt ist unter https://h5p.org/content-types-and-applications als Beispiel für eine Bildergalerie verfügbar und kann mit https://h5p.org/h5p/embed/128863 direkt aufgerufen werden.

Weitere Informationen zu H5P und den Möglichkeiten zur Einbindung in die Lernplattform fasst die Seite H5P Inhalte in OPAL nutzen zusammen.

 

 

Inhalt

Verwandte Themen

 

H5P- Inhalt einbetten

Um einen online verfügbaren H5P-Inhalt auf einer internen Seite einzubetten, gehen Sie wie folgt vor:

Öffnen Sie den Texteditor im Kursbaustein Einzelne Seite, zu der Sie den Inhalt einbetten möchten. Dies ist über die Kursansicht oder den Kurseditor möglich. Wählen Sie den Eintrag Einfügen im Werkzeugbereich des Texteditors. Es öffnet sich eine Liste. Klicken Sie hier auf die Auswahloption Video einfügen.

Textditor - Video einfügen_de.png

Im sich öffnenden Dialog wählen Sie den angezeigten Reiter Einbetten. Tragen Sie dort Ihren Einbettungscode in das Textfeld ein.

<iframe src=" [ URL zur pdf-Datei ] " width="800" height="1000" [ weitere Attribute ]></iframe>

Passen Sie im Einbettungscode den Link zur H5P Inhalt an.

Für das Beispiel wird der Inhalt https://h5p.org/h5p/embed/128863 genutzt. Der minimale Einbettungscode lautet demnach:

<iframe src="https://h5p.org/h5p/embed/440740" width="800" height="1000"></iframe>

Der Einbettungscode kann auch am H5P-Inhalt selbst kopiert werden. Wählen Sie dazu den Link "<>Embed" unter dem Beispielinhalt. In einem kleinen Fenster wird der Einbettungscode angezeigt. Dieser enthält zusätzliche Funktionen und lautet:

<iframe src="https://h5p.org/h5p/embed/128863" width="1090" height="639" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *" title="Course Presentation"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

Mixed Content und CORS

Von "Mixed Content" spricht man, wenn Webseiteninhalte teils verschlüsselte (https) und teilweise über eine unverschlüsselte (http) Verbindung ausgegeben werden.

Achten Sie darauf, das die URL des H5P-Inhalts ebenfalls per https verfügbar ist. Ist sie nur per unverschlüsselte Verbindung (http) verfügbar, wird vom Browser den Inhalt nicht angezeigt, sondern eine Warnmeldung ausgegeben.

 

Texteditor - H5P Einbettungscode_de.png

 

Bei Bedarf können Sie die Größe auch nachträglich im Reiter Allgemein anpassen. Schließen Sie den Dialog mit Klick auf den Button OK.

Texteditor - Grösse des H5P Inhalt ändern_de.png

Anschließend wird ein Platzhalter mit dem H5P-Inhalt im Textbereich angezeigt. Speichern Sie Ihre Seite mit Klick auf den Button Speichern und Schließen.

Texteditor - H5P-Beispiel speichern_de.png

Die Editoransicht wird geschlossen und Sie sehen in der Kursansicht den PDF-Inhalt auf der angezeigten Seite.

Wird statt des erwarteten Inhalts nur eine leere Seite angezeigt, kann dies an weiteren technischen Einschränkungen, beispielsweise durch den Webserver oder den Herausgebers des Inhalts, liegen. Eine eingebettete Anzeige in der Lernplattform ist dann nicht möglich.

 

Kursansicht - Eingebetteter H5P-Beispielinhalt_de.png

 

Browsereinstellungen beachten

Einstellungen zum Browsercache

Der Cache bezeichnet ein Speicherort, an dem Daten temporär lokal auf einem Gerät oder Festplatte speichert werden. Wenn Sie eine Webseite aufrufen, werden je nach Browsereinstellung bestimmte Inhalte der Webseite auf der Festplatte Ihres Gerätes gespeichert. Wird die eingebettete PDF-Datei an ihrem Ursprungsort geändert und aktualisiert, hängt es von den Einstellungen des Nutzers zum Browsercache ab, wann die aktualisierte Datei bei ihm im Browser angezeigt wird. Solange die alte Version noch im Cache verfügbar ist, wird diese angezeigt. Weisen Sie deshalb Ihre Lernenden darauf hin, regelmäßig den Browsercache zu leeren.

Wie folgt lässt sich der Browsercache leeren: 

  • per Shortcut (alle Browser): [Strg], [Shift] und [Entf]> "Browserdaten löschen">Gesamte Zeit>Checkboxen aus wählen>Daten löschen
  • Firefox: Einstellungen>Datenschutz und Sicherheit>Cookies und Website-Daten>Daten entfernen>Checkboxen aus wählen>Leeren
  • Chrome: Einstellungen>Datenschutz und Sicherheit>>Browserdaten löschen>Gesamte Zeit>Checkboxen aus wählen>Daten löschen