Herzlich Willkommen zum ersten Türchen und damit dem Start des AdvenTOOLender 2019! Schön, dass du mit dabei bist. Wir beginnen dort, wo wir den Adventskalender 2018 fast beendet haben (Türchen 23): beim Thema „Interaktive Videos“. Vergangenes Jahr habe ich euch dafür „ekostudio“ vorgestellt (Artikel: „Tag 23: Interaktive Videos mit ‚ekostudio‘ erstellen“). Heute ist es H5P. Als kleiner Spoiler vorweg: H5P ist so krass. Damit kann man so viele unterschiedliche, interaktive Anwendungen bauen. Deshalb wird es mit diesem Tool in den kommenden Tagen noch mehr geben. Aber: Fangen wir an! In diesem Artikel erfährst du, wie du ein interaktives Video mit H5P umsetzen kannst.
Beispiel: Interaktiver Besuch bei TinkerToys
Ich durfte vor einiger Zeit beim Unternehmen „TinkerToys“ in Leipzig vorbeischauen und mein eigenes 3D-Spielzeug herstellen. Das kann übrigens jeder machen. Wie das funktioniert und was die Firma so macht, all das habe ich damals in einem YouTube-Video festgehalten. Mit dem heutigen Tool „H5P“ habe ich das Ganze jetzt nachträglich interaktiv gestaltet. Solche Spielereien könnte man beispielsweise realisieren:
Klicke auf den Play-Button in der Mitte des Videos zum Anschauen! 🙂
Geeignete Themen
Anders als beim oben erwähnten „ekostudio“, brauchst du keine neuen Videosequenzen drehen, um für Interaktivität zu sorgen. Du kannst dein Video also so drehen, wie du möchtest, und dann später „Erklärpunkte/Interaktionspunkte“ an einzelne Stellen setzen. Dementsprechend eignet sich jedes Thema, zu dem du Video-Material hast. Wichtig ist hier, dass du etwas Sinnvolles zu ergänzen hast, wie bei einem Backvideo, eine Zutatenliste.
Ein paar Beispielideen:
- Geschichtsunterricht: Im Video sind Szenen aus der französischen Revolution zu sehen. Die interaktiven Punkte zeigen Infos zu wichtigen Personen, die darin eine Rolle spielen oder eine Übersicht des Ablaufes mit einer (zeitlichen) Einordnung, wo sich die entsprechende Szene gerade befindet. Oder, um es noch schulischer zu machen: In den interaktiven Punkten stehen Aufgaben, die der Schüler bei dieser Szene machen soll.
- Berichterstattung über einen Besuch im Zoo. Interaktiver Punkt zu Beginn mit Info, welcher Zoo, Preise Eintritt, Öffnungszeiten, Größe. Im Verlauf des Videos: Infos zu den Tieren.
Ungeeignete Themen
Sobald du kein Videomaterial oder keine weiterführenden Infos zum Thema für die interaktiven Punkte hast, eignet es sich nicht.
Die Schritt-für-Schritt-Anleitung
Abonniere meinen YouTube-Kanal gerne, wenn du möchtest. Das ist total kostenlos. Vielen Dank für deine Unterstützung! ♥️
Und so erstellst du dein eigenes interaktives Video:
1.) Gehe auf die Homepage von H5P. Klicke oben rechts auf „Create free account“ um dir einen kostenlosen H5P-Account zu erstellen. So kommst du in deinen eigenen Account. Solltest du wieso auch immer irgendwo anders hingeleitet werden, klicke oben rechts auf „My account“. Ab dort startet nämlich das Ganze.
2.) Klicke in deinem Account auf den Button „Try out H5P“ (rechts neben dem Foto). Dadurch kommst du auf eine Übersicht, bei der du aus verschiedenen Typen auswählen kannst – also was genau du umsetzen willst. Klicke auf „Interactive Video“ (bei mir war das gleich an erster Stelle).
3.) Jetzt siehst du ein Übersichtsfenster (Foto 1). Klicke oben neben dem Titel auf „Metadata“, um dort den Titel einzutragen. Bei mir ist es „Interaktiver Besuch bei TinkerToys in Leipzig“. Dort kannst du auch die Lizenz eintragen, die für dein Video gilt. Ich habe es bei „Undisclosed“ (Ungenannt) gelassen. Du könntest deinen Inhalt (sofern er von dir ist), natürlich auch für alle rechtlich nutzbar machen, beispielsweise mit einer der Creative Commons-Lizenzen. Klicke auf „Save Metadata“, wenn du alle Eingaben getätigt hast.
4.) Lade jetzt das Video hoch, das du interaktiv gestalten willst. Klicke dafür auf den Kasten mit dem Plus unter der Überschrift „Add a video“ (siehe Foto 1). Entweder du hast die Video-Datei auf deinem Rechner oder du nutzt einen YouTube-Link. Wenn du das Beispiel oben nachbauen willst, kannst du gerne mein YouTube-Video dafür nutzen. Füge dein jeweiliges Video hinzu.
5.) Klicke als nächstes auf den Reiter „Step 2: Add interactions“, um die Interaktionen hinzuzufügen (siehe Foto 1). Dadurch siehst du dein hochgeladenes Video und Leiste mit vielen Button (siehe Foto 2). Mit ihrer Hilfe kannst du Interaktionen hinzufügen. Diese Möglichkeiten gibt es:
- Label (Text, der offen auf dem Video steht)
- Text (kann offen oder hinter einem Button versteckt sein)
- Tabelle
- Verlinkungen
- Bild
- Statements
- Single Choice-Set
- Multiple Choice
- Richtig-/Falsch-Frage
- Lücken füllen
- „Drag and Drop“
- Wörter markieren
- Text ziehen/platzieren
- „Crossroads“ (ermöglichen Zeitsprünge zu einem anderen Teil des Videos)
- Navigation Hotspot
- Fragebögen
- Fragen mit Textfeld, in das die User ihre eigenen Antworten schreiben können
Wie funktioniert das Ganze jetzt? Das Prinzip ist ganz einfach: Du gehst in der Zeitleiste an die entsprechende Stelle, wo das interaktive Element platziert werden soll. Dann ziehst du das Element (z.B. den Text-Button) via Drag and Drop an die entsprechende Stelle auf dem Video. Ich zeige dir das genaue Vorgehen an zwei Elementen:
- der „Text“-Button (zweiter von links): Gehe an der Stelle im Video, wo du den Text-Button platzieren möchtest und ziehe ihn auf das Video. Dadurch erscheint ein runder Punkt. Den kannst du beliebig verschieben. Je nachdem, wo du ihn haben möchtest. Klicke auf den Punkt und nutze das Stift-Symbol um ihn zu bearbeiten. Dann öffnet sich eine Maske (siehe Foto 3). Dort kannst du unterschiedliche Dinge einstellen.
Die „Display Time“ gibt an, von wann bis wann das Element in deinem Video angezeigt wird. „Pause Video“ kannst du aktivieren, wenn du möchtest, dass das Video angehalten wird, sobald das Element erscheint. Beim Text habe ich das nicht gemacht, da ich das für weitere Infos genutzt habe, die der User aber nicht zwangsläufig lesen muss. Er könnte aber. „Display as“ erlaubt dir zwei Darstellungsformen. Mit „Button“ wird der Text erst angezeigt, wenn der User auf den Punkt im Video klickt. Bei „Poster“ sieht der User alle Infos bereits. Beides hat Vor- und Nachteile. Ich habe mich bei den Text-Punkten immer für „Button“ entschieden, da ich es schöner finde, wenn der User die Infos selbst entdecken kann, in dem er darauf klickt. Bei Frage-Elementen, die ich dir gleich zeige, habe ich immer „Poster“ genutzt, da ich es für sinnvoller halte, wenn die Frage dort bereits steht und der User direkt auf eine Antwort klicken kann. Füge darunter dann den Text ein, der angezeigt werden soll, wenn jemand auf den Punkt klickt.
Wenn du alle Infos eingetragen hast, klicke auf „Done“, um zum Bearbeitungsmenü (siehe Foto 2) zurückzukommen. Jetzt gehst du wieder zu einer Stelle im Video und ziehst das nächste Element dort hin.
- der „Single Choice“-Button (siebter von links): Er ermöglicht, dass du eine Frage mit mehreren Antwort-Möglichkeiten auf deinem Video platzieren kannst. Nutze diese Option beispielsweise als kurze Zwischenfrage, die es dir ermöglicht herauszufinden, ob dein Video-Zuschauer aufgepasst hat. Klicke auf das Element, wenn du es auf dein Video gezogen hast und bearbeite es. Das jetzt geöffnete Fenster unterscheidet sich durch den Fragen-Part von dem Text-Element (siehe Foto 4). Hier kannst du jetzt deine Frage eintragen und bis zu drei Antwort-Möglichkeiten. Das erste Antwort-Feld, das du ausfüllst, muss die richtige Antwort sein. Sobald du fertig bist, klicke wieder auf auf den „Done“-Button.
Anmerkung: Bei mir ist an dieser Stelle des Videos auch „Pause Video“ aktiviert und das Ganze wird als „Poster“ dargestellt.
6.) So machst du jetzt also mit deinem gesamten Video weiter. Du fügst interaktive Elemente an die Stellen, an denen du sie haben möchtest und triffst dementsprechend deine Einstellungen.
7.) Solltest du alle Elemente hinzugefügt haben, klicke im Reiter auf „Step 3 Summary Task“ (siehe Foto 3). Damit fügst du deinem Video einen finalen Fragebogen hinzu, auf dem dann auch sichtbar wird, wie gut der User insgesamt, also bei all deinen Fragen, abgeschnitten hat. Bei mir sieht das Ganze wie in Foto 5 aus.
Etwas weiter unten kannst du das „Overall Feedback“ einstellen. Ich habe mich, unabhängig davon, wie gut der User die Fragen, die in meinem Video auftauchen, beantwortet, dafür entschieden, ihm immer „Danke fürs Mitmachen!“ zu sagen. Du kannst hier aber unterschiedliche Möglichkeiten einstellen. Dafür klickst du auf „Add Range“. Du könntest dort zum Beispiel angeben: „0% – 20%: Du solltest genauer zuhören!“, „21% – 40%: Du hast ein paar Antworten richtig, da geht aber noch mehr!“, „41% – 60%: Du hast etwa die Hälfte richtig. Das nächste Mal schaffst du die andere Hälfte auch noch!“, „61% – 80%: Schon gar nicht schlecht, aber noch etwas Verbesserungsbedarf.“, „81% – 100%: Richtig stark! Du bist wirklich super!“ Das Ganze ist also die Einordnung/das Feedback für den Zuschauer deines interaktiven Videos.
8.) Sobald du mit allem fertig bist, klicke ganz unten links auf das magenta-farbene Wort „Save“. Dadurch wird dein gesamtes interaktives Video gespeichert und erscheint in einer neuen Ansicht (siehe Foto 6). Hier kannst du es dir anschauen und überprüfen, ob dir deine Einstellungen und interaktiven Elemente gefallen.
Falls du unzufrieden bist: Klicke oben auf „Edit“, um das Video zu bearbeiten. Gehe dann an die Stellen im Video, wo du etwas verändern willst. Sobald du die Änderungen gemacht hast, klicke unten wieder auf „Save“. Schaue dir das Ganze an und bearbeite es so lange, bis zu begeistert davon bist.
Falls du zufrieden bist: Jetzt kannst du dein interaktives Video in deine Homepage einbetten! Klicke dafür auf „Embed“, das klein unter dem Video steht. Dadurch erhältst du den Embed-Code, den du direkt in deine Homepage einpflegen kannst. Ganz viel Spaß damit! 🙂
Weitere Beispiele und Impulse
H5P zeigt auf seiner Homepage eigene Beispiele, und zwar diese beiden interaktiven Videos:
Und hier ein paar Impulse von Twitter-Usern (am besten auch die Kommentare unter den Tweets lesen):
Du hast noch Fragen zu H5P, Feedback zum AdvenTOOLender oder ein bestimmtes Tool, das ich neben der Adventskalender-Aktion Schritt-für-Schritt erklären soll? Immer her damit! Entweder als Kommentar unter diesen Blog-Eintrag, per E-Mail (johanna.daher@gmx.de), via Kontaktformular oder über die sozialen Kanäle.
Quelle Beitragsbild: Screenshot