Skip to Content
Last modified by Carina Enke on 17.01.2024
Hide last authors
Carina Enke 10.1 1 {{layout}}
2 {{layout-section ac:type="single"}}
3 {{layout-cell}}
Carina Enke 8.8 4
Carina Enke 10.1 5 {{/layout-cell}}
6 {{/layout-section}}
Carina Enke 1.1 7
Carina Enke 10.1 8 {{layout-section ac:type="two_right_sidebar"}}
9 {{layout-cell}}
Carina Enke 8.8 10 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>>url:https://h5p.org/content-types-and-applications||shape="rect"]] als Beispiel für eine Bildergalerie verfügbar und kann mit [[https:~~/~~/h5p.org/h5p/embed/128863>>url:https://h5p.org/h5p/embed/128863||shape="rect"]] direkt aufgerufen werden.
Carina Enke 1.1 11
Carina Enke 12.1 12 Weitere Informationen zu H5P und den Möglichkeiten zur Einbindung in die Lernplattform fasst die Seite [[H5P Inhalte in OPAL nutzen>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Leitfäden.H5P Inhalte in OPAL nutzen.WebHome]] zusammen.
Carina Enke 1.1 13
Carina Enke 8.8 14
Carina Enke 10.1 15 {{/layout-cell}}
Carina Enke 1.1 16
Carina Enke 10.1 17 {{layout-cell}}
Carina Enke 3.1 18 (% class="auto-cursor-target" %)
Carina Enke 8.8 19
Carina Enke 3.1 20
Carina Enke 10.1 21 {{panel title="Inhalt"}}
22 {{toc/}}
23
Carina Enke 1.1 24 **Verwandte Themen**
25
Carina Enke 12.1 26 * [[Einzelne Seite>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kursbausteine.Einzelne Seite.WebHome]]
Carina Enke 10.1 27 {{/panel}}
Carina Enke 3.1 28
29
Carina Enke 8.8 30
Carina Enke 3.1 31 (% class="auto-cursor-target" %)
Carina Enke 8.8 32
Carina Enke 10.1 33 {{/layout-cell}}
34 {{/layout-section}}
Carina Enke 1.1 35
Carina Enke 10.1 36 {{layout-section ac:type="single"}}
37 {{layout-cell}}
Carina Enke 1.1 38 == H5P- Inhalt einbetten ==
39
40 Um einen online verfügbaren H5P-Inhalt auf einer internen Seite einzubetten, gehen Sie wie folgt vor:
Carina Enke 10.1 41 {{/layout-cell}}
42 {{/layout-section}}
Carina Enke 1.1 43
Carina Enke 10.1 44 {{layout-section ac:type="two_equal"}}
45 {{layout-cell}}
Carina Enke 3.1 46 Ö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**.
Carina Enke 10.1 47 {{/layout-cell}}
Carina Enke 1.1 48
Carina Enke 10.1 49 {{layout-cell}}
Carina Enke 11.1 50 [[image:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.Inhalte einbetten.VR-Inhalte einfuegen.WebHome@Textditor - Video einfügen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 10.1 51 {{/layout-cell}}
52 {{/layout-section}}
Carina Enke 1.1 53
Carina Enke 10.1 54 {{layout-section ac:type="two_equal"}}
55 {{layout-cell}}
Carina Enke 1.1 56 Im sich öffnenden Dialog wählen Sie den angezeigten Reiter **Einbetten**. Tragen Sie dort Ihren Einbettungscode in das Textfeld ein.
57
Carina Enke 10.1 58 {{panel}}
Carina Enke 1.1 59 <iframe src=" [ URL zur pdf-Datei ] " width="800" height="1000" [ weitere Attribute ]></iframe>
Carina Enke 10.1 60 {{/panel}}
Carina Enke 1.1 61
62
63 (% class="auto-cursor-target" %)
64 Passen Sie im Einbettungscode den Link zur H5P Inhalt an.
65
66 (% class="auto-cursor-target" %)
Carina Enke 3.1 67 Für das Beispiel wird der Inhalt [[https:~~/~~/h5p.org/h5p/embed/128863>>url:https://h5p.org/h5p/embed/128863||shape="rect"]] genutzt. Der minimale Einbettungscode lautet demnach:
Carina Enke 1.1 68
Carina Enke 10.1 69 {{panel}}
Carina Enke 1.1 70 <iframe src="[[https:~~/~~/h5p.org/h5p/embed/440740>>url:https://h5p.org/h5p/embed/440740||shape="rect"]]" width="800" height="1000"></iframe>
Carina Enke 10.1 71 {{/panel}}
Carina Enke 1.1 72
73 (% class="auto-cursor-target" %)
74 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:
75
Carina Enke 10.1 76 {{panel}}
Carina Enke 1.1 77 <iframe src="(% class="nolink" %)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="(% class="nolink" %)https:~/~/h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js(%%)" charset="UTF-8"></script>
Carina Enke 10.1 78 {{/panel}}
Carina Enke 1.1 79
Carina Enke 11.1 80 {{info title="Mixed Content und CORS"}}
Carina Enke 10.1 81 Von "**Mixed Content**" spricht man, wenn Webseiteninhalte teils verschlüsselte (https) und teilweise über eine unverschlüsselte (http) Verbindung ausgegeben werden.
Carina Enke 1.1 82
Carina Enke 8.8 83 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.
Carina Enke 10.1 84 {{/info}}
Carina Enke 3.1 85
86 (% class="auto-cursor-target" %)
Carina Enke 8.8 87
Carina Enke 10.1 88 {{/layout-cell}}
Carina Enke 1.1 89
Carina Enke 10.1 90 {{layout-cell}}
Carina Enke 11.1 91 [[image:attach:Texteditor - H5P Einbettungscode_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 10.1 92 {{/layout-cell}}
93 {{/layout-section}}
Carina Enke 1.1 94
Carina Enke 10.1 95 {{layout-section ac:type="single"}}
96 {{layout-cell}}
Carina Enke 8.8 97
Carina Enke 10.1 98 {{/layout-cell}}
99 {{/layout-section}}
Carina Enke 1.1 100
Carina Enke 10.1 101 {{layout-section ac:type="two_equal"}}
102 {{layout-cell}}
Carina Enke 1.1 103 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**.
Carina Enke 10.1 104 {{/layout-cell}}
Carina Enke 1.1 105
Carina Enke 10.1 106 {{layout-cell}}
Carina Enke 11.1 107 [[image:attach:Texteditor - Grösse des H5P Inhalt ändern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 10.1 108 {{/layout-cell}}
109 {{/layout-section}}
Carina Enke 1.1 110
Carina Enke 10.1 111 {{layout-section ac:type="two_equal"}}
112 {{layout-cell}}
Carina Enke 1.1 113 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**.
Carina Enke 10.1 114 {{/layout-cell}}
Carina Enke 1.1 115
Carina Enke 10.1 116 {{layout-cell}}
Carina Enke 11.1 117 [[image:attach:Texteditor - H5P-Beispiel speichern_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 10.1 118 {{/layout-cell}}
119 {{/layout-section}}
Carina Enke 1.1 120
Carina Enke 10.1 121 {{layout-section ac:type="two_equal"}}
122 {{layout-cell}}
Carina Enke 1.1 123 Die Editoransicht wird geschlossen und Sie sehen in der Kursansicht den PDF-Inhalt auf der angezeigten Seite.
124
Carina Enke 10.1 125 {{info}}
Carina Enke 1.1 126 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.
Carina Enke 10.1 127 {{/info}}
Carina Enke 3.1 128
129 (% class="auto-cursor-target" %)
Carina Enke 8.8 130
Carina Enke 10.1 131 {{/layout-cell}}
Carina Enke 1.1 132
Carina Enke 10.1 133 {{layout-cell}}
Carina Enke 11.1 134 [[image:attach:Kursansicht - Eingebetteter H5P-Beispielinhalt_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 10.1 135 {{/layout-cell}}
136 {{/layout-section}}
Carina Enke 1.1 137
Carina Enke 10.1 138 {{layout-section ac:type="single"}}
139 {{layout-cell}}
Carina Enke 3.1 140 (% class="auto-cursor-target" %)
Carina Enke 8.8 141
Carina Enke 3.1 142
Carina Enke 10.1 143 {{note title="Browsereinstellungen beachten"}}
144 (% style="color:#202124" %)**Einstellungen zum Browsercache**
Carina Enke 1.1 145
Carina Enke 8.8 146 (% style="color:#202124" %)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.
Carina Enke 1.1 147
Carina Enke 8.8 148 (% style="color:#202124" %)Wie folgt lässt sich der Browsercache leeren:
Carina Enke 1.1 149
150 * per Shortcut (alle Browser): [Strg], [Shift] und [Entf]> "Browserdaten löschen">Gesamte Zeit>Checkboxen aus wählen>Daten löschen
151 * Firefox: Einstellungen>Datenschutz und Sicherheit>Cookies und Website-Daten>Daten entfernen>Checkboxen aus wählen>Leeren
152 * Chrome: Einstellungen>Datenschutz und Sicherheit>>Browserdaten löschen>Gesamte Zeit>Checkboxen aus wählen>Daten löschen
153
Carina Enke 8.8 154
Carina Enke 10.1 155 {{/note}}
Carina Enke 3.1 156
157 (% class="auto-cursor-target" %)
Carina Enke 8.8 158
Carina Enke 10.1 159 {{/layout-cell}}
160 {{/layout-section}}
161 {{/layout}}