Humboldt-Universität zu Berlin - Digitale Medien

Wie kann ich Videos in externe Seiten einbinden?

Wie kann ich Videos in Moodle, Plone oder HTML-Seiten einbinden? Welche Vorteile habe ich dadurch?

Verfahren

Videos werden mittels des Browsers oder per WebDAV wie jede andere Ressource in das Medien-Repositorium geladen, wobei auf die Angabe des Typs Video zu achten ist.

Ungeachtet des Formats des hochgeladenen Videos werden vom Medien-Repositorium folgende Dateien automatisch angelegt:

  • ein Vorschaubild, das aus der 5. Sekunde des Videos abgeleitet wird,
  • eine verkleinerte Vorschau, die standardmäßig zwei Minuten lang ist,
  • zwei alternative Dateien in voller Auflösung in zwei unterschiedlichen Formaten (mp4 und webm).

Das Anlegen dieser Dateien geschieht nach dem Hochladen im Hintergrund (der Browser kann geschlossen werden) und kann einige Zeit in Anspruch nehmen. Solange der Vorgang läuft, wird die Meldung Ressource wird momentan umgewandelt auf der Webseite der Ressource angezeigt. Nach Abschluss des Vorgangs sieht die Webseite der Ressource wie in diesem Beispiel aus.

Das Einbetten eines Videos geschieht in folgenden zwei Schritten:

  1. Link generieren
    Auf der Webseite des Videos im MR rechts neben der Vorschau: > Weitergeben den Punkt > URL generieren und klicken auf Externe URL generieren. Es wird ein Schlüssel erzeugt (k=) der dann automatisch in > Einbetten (HTML5) verwendet wird (für mehr Informationen hierzu siehe Warum funktioniert der Link zum Einbetten nicht mehr?)
  2. Link in die Zielwebseite einbinden
    Zum Einbinden des Videos verwenden Sie bitte den Link > Einbetten (HTML5) auf der Webseite des Videos im MR. Markieren Sie den gesamten, dort angezeigten Code (z.B. mit Strg+a) und kopieren Sie ihn (z.B. mit Strg+c). Diesen Code können Sie in ihrer Zielwebseite einfügen. Bei Systemen wie Moodle oder Plone müssen Sie jedoch zuvor in die Quellcode-Ansicht ihrer Webseite wechseln.

Beispiel

Für das Beispiel erhalten Sie somit folgenden HTML5-konformen Code:

<!-- Schluessel aus manuell generierter URL genutzt -->


<video id="ref_1110" controls preload="none" width="480" height="270" poster="https://rs.cms.hu-berlin.de/demo/plugins/api_resource/?ref=1110&amp;k=ceaab01797&amp;preview=1">
<source src="https://rs.cms.hu-berlin.de/demo/plugins/api_resource/?ref=1110&amp;alt_ref=35&amp;k=ceaab01797" type="video/mp4" />
<source src="https://rs.cms.hu-berlin.de/demo/plugins/api_resource/?ref=1110&amp;alt_ref=34&amp;k=ceaab01797" type="video/webm" />
<source src="https://rs.cms.hu-berlin.de/demo/plugins/api_resource/?ref=1110&amp;k=ceaab01797" type="video/mp4" />
</video>

 

Nach dem Einbinden auf der Zielwebseite sieht das Ergebnis wie folgt aus:

 

(Blender Foundation, CC BY 3.0)

Wird eine größere Anzeige gewünscht, so können die Parameterwerte von width und height angepasst werden.

Vorteile

Die Einbettung bzw. Verlinkung von Dateien und insbesondere von Videos hat den grundsätzlichen Vorteil, dass die Datei nur einmal gespeichert werden muss und in verschiedenen Systemen gleichermaßen zur Verfügung steht. Das spart Speicherplatz und erhöht die Übersichtlichkeit.

Die im Medien-Repositorium gewählte, technische Lösung bietet durch den HTML5-Standard folgende Vorteile:

  • Unterstützung mobiler Geräte (z.B. Android und iOS),
  • breite Unterstützung von Browsern auf verschiedenen Betriebssystemen und
  • Unabhängigkeit von Browser-Plugins (wie beispielsweise Flash, das auf mobilen Geräten nicht zur Verfügung steht).

Technischer Hintergrund

Bei Videoformaten spielen hauptsächlich drei Aspekte ineinander:

  1. das Containerformat (z.B. mp4, webm, ogg, mov),
  2. der darin verwendete Video-Codec (z.B. h264, vp8, vp9) und
  3. der enthaltene Audio-Codec (z.B. aac, vorbis, opus).

In Abhängigkeit der daraus resultierenden Kombinationen wird das Resultat von bestimmten Browsern auf verschiedenen Systemen wiedergegeben oder eben nicht. Der HTML5-Standard versucht, diese Flut zu ordnen und sieht u.a. die Kombinationen webm+vp8+vorbis und mp4+h264+aac vor. Leider bieten u.a. diese beiden Kombinationen nur zusammen die gewünschte, breite Unterstützung von Browsern auf verschiedenen Betriebssystemen. Deshalb werden vom Medien-Repositorium diese beiden Formate automatisch erzeugt.

Übrigens: MOV wird als Container von HTML5 nicht unterstützt. Trotzdem können sich bestimmte Browser entscheiden, MOV und die darin enthaltene Kombination von Video- und Audio-Codec dennoch wieder zu geben (abhängig vom Browser und dem Betriebssystem).

Weitere Informationen: