Um ein Video auf der Webseite zu zeigen, gehen Sie wie folgt vor:

1. Vorbereiten
2. Hochladen
3. Einbetten

Vorbereitung

Um ein Video in die Webseite einzubetten, benötigen Sie zunächst mal ein Video. Beachten Sie die folgenden Tipps:

• Licht: Achten Sie auf eine angemessene Beleuchtung.
• Ton: Verwenden Sie beim Filmen ein externes Microphon, z.B. ein Ansteckmikrofon (Lavalier-Mikrofon), das es schon für wenig Geld gibt. Bereits ein billiges Mikrofon verbessert die Klangqualität erheblich.
• Dateigröße: Moderne Kameras speichern Videos in sehr großen Dateien ab, was dazu führt, dass es lange dauert, bis das Video angezeigt wird. Diese sollten Sie reduzieren, indem Sie das Video neu kodieren, z.B. mit der Software Handbrake. Für die Webseite reicht ein Video in der Qualität 720p.

Hochladen

Laden Sie Ihr Video hoch. Leider ist es nicht möglich, das Video direkt auf der Webseite hochzuladen, sondern Sie benötigen dafür einen externen Dienst. Dort müssen Sie das Video hochladen und danach auf der Webseite einbinden.

• Für Info-Videos wie z.B. ein Video über Ihre Arbeitseinheit können Sie die Heibox verwenden.
• Für Vorlesungen und regelmäßige Info-Videos, Video-Casts oder Interviews, sowie Videos, die Probanden im Rahmen einer Studie gezeigt werden, verwenden Sie den Dienst Heicast.
• Es ist auch möglich, Videos bei YouTube hochzuladen, jedoch raten wir aus Datenschutzgründen davon ab (beim Betrachten des Videos werden Informationen der Nutzer an Google übertragen, was wir generell vermeiden möchten).

Einbetten

Um das Video einzubetten, müssen Sie den folgenden HTML-Code verwenden:

<video controls>
<source src="https://example.com/video.mp4" type="video/mp4">
Dieser Text erscheint, wenn das Video nicht abgespielt werden kann.
</video>

Bitte ersetzen Sie die Quelle im src-Attribut durch die Url ihres eigenen Videos.

Beispiel: Ein Video über die Heibox einbetten

Im Folgenden wird schrittweise erklärt, wie Sie ein Video einbetten:

1. Kodieren Sie Ihr Video, um die Dateigröße zu reduzieren. 720p sollte ausreichen. Eine detailliertere Anleitung finden Sie auf der Seite Videos verkleinern.
 

 

2. Laden Sie ihr Video hoch. In diesem Beispiel verwenden wir die Heibox. Wechseln Sie auf https://heibox.uni-heidelberg.de/. Erstellen Sie eine Bibliothek oder einen Ordner. Dort können Sie ihr Video hochladen, indem Sie das Video mit der Maus von Ihrem Computer in die Webseite ziehen:

3. Nachdem das Video hochgeladen wurde, erstellen Sie einen Link. Überfahren Sie den neuen Eintrag mit der Maus. Es erscheint ein Button, mit dem Sie das Video teilen können:

 

4. Erstellen Sie einen Freigabelink. Wählen Sie "Download Link" und dann "Vorschau und Herunterladen":

5. Heibox zeigt Ihnen nun zwei Links. Der eine führt Sie in die Heibox, der andere führt zu einem direkten Download. Dieser zweite ist der richtige: Kopieren Sie diesen Link! Sie erkennen Ihn daran, dass am Ende steht "?dl=1"
 

6. Fügen Sie den Link in den Code ein:

<video controls>
<source src="https://heibox.uni-heidelberg.de/f/43fbb4a0a8624d1f9c67/?dl=1" type="video/mp4">
Dieser Text erscheint, wenn das Video nicht abgespielt werden kann.
</video>

 

7. Fügen Sie den Code in die Seite Ihrer Arbeitseinheit ein. Beachten Sie, dass der Code nicht als Text, sondern als HTML-Code eingefügt werden muss. Klicken Sie dafür auf das Symbol < >:

8. Nach dem Speichern erscheint das eingebettete Video:

 

Hinweis zum Einbetten von YouTube-Videos

Das Einbetten von YouTube unterscheidet sich nicht von dem oben gezeigten Vorgang für die Heibox. Achten Sie jedoch darauf, dass Sie eine Datenschutzkonforme URL verwenden. Verwenden Sie daher als Domäne bitte "YouTube-Nocookie.com"
Gehen Sie dazu so vor:

1. Betrachten Sie die URL des Videos. Sie besteht aus einer Domäne und einem Code.
   1. Beispiel: https://www.youtube.com/watch?v=dQw4w9WgXcQ
   2. Der Code des Videos ist dQw4w9WgXcQ
2. Ändern Sie die Domäne in https://www.youtube-nocookie.com/embed/
   1. Achten Sie auf den Pfad "/embed/"
   2. Die neue URL sieht so aus:
      https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ

Verwenden Sie diese URL im src-Attribiut des Video-Elements.