Direkt zum InhaltDirekt zur SucheDirekt zur Navigation
▼ Zielgruppen ▼

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.

Zum Einbinden des Videos verwenden Sie bitte den Link > Einbetten (HTML5) auf der Webseite der Ressource. Für das Beispiel erhalten Sie somit folgenden HTML5-konformen Code:

<!-- Account des oeffentlichen Bereichs 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;key=5DS9SJBo5yX0m6BJFnQsUtr_mkLEbuMuyQWGEGQ9kvc,&amp;preview=1&amp;skey=6977a0ada9524c4305e4707a351d81b3" >
<source src="https://rs.cms.hu-berlin.de/demo/plugins/api_resource/?ref=1110&amp;key=5DS9SJBo5yX0m6BJFnQsUtr_mkLEbuMuyQWGEGQ9kvc,&amp;skey=14cf3900a7365768252fe0397629993e" type="video/mp4" />
<source src="https://rs.cms.hu-berlin.de/demo/plugins/api_resource/?ref=1110&amp;alt_ref=34&amp;key=5DS9SJBo5yX0m6BJFnQsUtr_mkLEbuMuyQWGEGQ9kvc,&amp;skey=c649f76016359b4922c751baa363dae7" type="video/webm" />
</video>

Markieren Sie den gesamten Code (z.B. mit Strg+a) und kopieren Sie ihn (die erste Zeile ist ein Kommentar und kann ignoriert werden). Diesen Code können Sie in ihre Webseite einfügen. Bei Systemen wie Moodle oder Plone müssen Sie jedoch zuvor in die Quellcode-Ansicht ihrer Webseite wechseln.

Das Ergebnis sieht für das Beispiel wie folgt aus:

(Blender Foundation, CC BY 3.0)

Dieser Code ist Accountgebunden: Entweder an den Account des öffentlichen Bereiches oder an den des angemeldeten Nutzers.
Wenn Sie generierte, kürzere Links verwenden wollen, dann nutzen Sie bitte unter > 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. Zu den Vor- und Nachteilen dieser beiden Mechanismen finden Sie weitere Informationen unter Warum funktioniert der Link zum Einbetten nicht mehr?

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: