Anwendungsbeispiel H5P Inhalte einbetten
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.
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.
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>
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.
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.
Die Editoransicht wird geschlossen und Sie sehen in der Kursansicht den PDF-Inhalt auf der angezeigten Seite.
