Videos einbinden

Erste negative Bemerkung: Videos haben in der MAM nichts zu suchen. Es gibt an der Universität viele mehr oder weniger brauchbare Möglichkeiten, Videos abzulegen. Hierbei richtet sich die Brauchbarkeit danach, ob das Video frei zugänglich ist oder auch danach, wie lang das Video verfügbar ist. Es gibt auch Youtube, ein kommerzielles, mit Werbung verseuchtes und eigentlich nicht mit dem europäischen Datenschutz in Einklang zu bringendes Angebot (Stand 2020).

Wenn Sie einen guten Platz gefunden haben, dann können Sie das Video einbinden. Um ein Video auf einer Webseite einzubinden, sind einfache HTML-Kenntnisse erforderlich.

Einbinden über HeiCast

Über HeiCast können Sie auch Videos erzeugen und veröffentlichen. Falls Sie Hilfe benötigen, dann fragen Sie bitte nicht beim Website-Service nach, sondern bei der Servicegruppe HeiCast. Angenommen, Ihr Video ist verfügbar und wird in einem Kanal veröffentlicht, dann können Sie es beispielsweise in einer Iframe einbinden.

Einbinden von Youtube-Videos und andere

Ich habe kein Video auf Youtube. Deswegen gibt es kein Beispiel, aber die Vorgehensweise sollte klar sein. Bitte beachten Sie, wenn Sie ein fremdes Video einbinden, dass Sie das Copyright besitzen!

Wie man es sich für ein Unternehmen von Alphabet Inc., der Muttergesellschaft von Google, Youtube etc. gehört, geht das Einbinden entweder ganz einfach oder gar nicht. Zurzeit geht es wie folgt:

Öffnen Sie das Video bei Youtube.
Klicken Sie mit der rechten Maustaste auf das Video
Kopieren Sie den Einbettungscode (<>)
Gehen Sie im Imperia-Workflow in den Bearbeiten-Schritt der Seite, in der das Video erscheinen soll.
Öffnen Sie den Quellcode.
Suchen Sie die Stelle, an der das Video erscheinen soll.
Fügen Sie an dieser Stelle mit STRG-V den kopierten Code ein.
NEU! Ändern Sie in der src-Angabe die Zeichenkette: https://www.youtube.com... durch https://www.youtube-nocookie.com..., damit Youtube keine Cookies setzt.
Sie können sich das Ergebnis in der Vorschau anschauen.
Wenn es passt, dann schließen Sie den Quellcode und überprüfen Sie das Ergebnis in der Vorschau.
Wenn es nicht passt, dann können Sie mit den Style-Angaben das Aussehen anpassen. Z. B. lässt sich die Breite auch prozentual angeben, also width="100%"

Das Video wird im IWE nur mit Platzhalter angezeigt.

So weit, so einfach. Jetzt sollte das Video schon funktionieren. Mit der Änderung der src-Angabe konnte wahrscheinlich verhindert werden, dass Youtube Tracking-Cookies setzt. Aber die IP-Adresse Ihres Besuchers wird leider immer noch an Youtube übermittelt. Dies können Sie umgehen, indem Sie die folgenden Schritte noch ausführen:

Ändern Sie im Embedded-Code die Zeichenkette src durch data-src.

Fügen Sie nach der Iframe-Umgebung den folgenden Code hinzu.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', _2ClickIframePrivacy.init(''));
</script>

Dann öffnen Sie das Java-Script-Feld des grünen Eingabetemplates (am Besten Alles ausklappen) und fügen dort folgenden Java-Script- und CSS-Code ein:

<script src="https://www.uni-heidelberg.de/js/2Click-Iframe-Privacy-master/2ClickIframePrivacy.min.js"></script>

<style type="text/css">
div.privacy-msg p {
    width:200px;
    border: 1px solid black;
    padding: 5px;
    text-align:center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}
</style>

Weitere Informationen zu diesem Script finden Sie unter: https://github.com/01-Scripts/2Click-Iframe-Privacy. Das CSS können Sie bei Bedarf anpassen.

Die Universität hat auch einen Videokanal. Eventuell setzen Sie sich vor dem Hochladen mit der KuM diesbezüglich in Verbindung.

Entsprechend können Sie beispielsweise Videos von Vimeo einbinden. Hochladen bei Vimeo ist auch hier im Standardmodus kostenlos und laut Angaben werbungsfreier. Das Einbinden funktioniert genauso wie bei Youtube. Den Code finden Sie unter dem Papierflieger (Teilen). Hier können Sie auch weitere Einstellungen über ein Menü auswählen. Und müssen sich nicht, wie bei Youtube mit den Optionen in Variablen auseinandersetzen. Die Daten landen auch in USA. Vimeo bietet ansonsten auch viele Video-Tutorials zur Video-Erstellung, zu Video-Formaten usw. Auch hier können Sie das Setzen von Cookies unterdrücken, indem Sie ?dnt=1 direkt am Ende der URL anhängen.

Dailymotion hat jetzt wieder mehr Werbung, aber die Daten liegen wahrscheinlich in Frankreich. Das Einbinden geht ebenfalls in der gewohnten Art.

Weitere Möglichkeiten finden Sie im Internet.

Einbinden mit HTML 5

Das funktioniert beispielsweise mit handlichen Videos, die Sie in der HeiBox hochgeladen haben. Sie können in der HeiBox bekanntlich Dateien für alle freigeben, damit sich niemand anmelden muss.

Um möglichst viele Benutzer anzusprechen, bieten Sie das Video optimalerweise im .mp4- und .ogg-Format an.

Kopieren Sie folgenden Code-Schnipsel in den Quellcode Ihrer Seite und ersetzen Sie IHRVIDEO durch den entsprechenden Pfad auf Ihr Video. Wenn Sie kein anderes Format anbieten, löschen Sie entsprechende Abschnitte.

<video controls="controls">
  <source src="IHRVIDEO.mp4" type="video/mp4">
  <source src="IHRVIDEO.ogg" type="video/ogg">
      Ihr Browser unterst&uuml;tzt leider nicht das Abspielen von Videos mit HTML.<br>
      Sie k&ouml;nnen sich das Video aber auch herunterladen:<br>
      Als <a href="IHRVIDEO.ogg">ogg</a> oder als <a href="IHRVIDEO.mp4">mp4</a>.
</video>

Man sollte annehmen, dass das Video bei einer relativen Verlinkung automatisch freigeschaltet wird, wenn es im source-Code angegeben ist. Das ist aber leider nicht der Fall. In obigem Beispiel wird es aber freigeschaltet, weil es relativ im href-Code verlinkt ist.

Den Link auf Ihr Video erhalten Sie am einfachsten, indem Sie auf Linkeinfügen im Editor klicken, MAM durchsuchen auswählen und das Video (per Doppelklick) einbinden.

Verantwortlich: Website-Services

Letzte Änderung: 21.07.2021