Navigation

Kontakt

Volker Burggräf
Internetkoordinator

Video und Audio einbetten

Mit dem neuen TYPO3-Element Text&Medien können Videos genauso eingebettet werden wie statische Grafiken. Es wird dann automatisch ein geeigneter Player aktiviert. Man braucht also nicht mehr mit speziellen TYPO3-Modulen zu arbeiten, wenn man Videos verwenden will.

Soll ein Video oder Audio in eine Webseite eingebettet werden, gibt es dafür verschiedene Möglichkeiten:

  • Sie stellen eine eigene Video- oder Audiodatei in TYPO3 bereit und verwenden diese dann in der Webseite. Dazu laden Sie Ihr Video (MP4) oder Audio (MP3) zunächst als Datei in der Dateiliste hoch und binden es anschließend als Medium im einem Text&Medien-Element ein.
  • Sie fügen ein Video von Youtube oder Vimeo per URL (http-Adresse des Videos) ein:
  1. Gehen Sie in der Dateiliste in ein passendes Unterverzeichnis und klicken dort auf den [Neu]-Button (s. Abb. 1).
  2. Fügen Sie die http-Adresse des Youtube- oder Vimeo-Videos ein und bestätigen mit dem Button [Medium hinzufügen] (Abb. 2).
  3. Anschließend sehen Sie den Eintrag bei den vorhandenen Dateien und verwenden ihn von dort aus, als wäre es eine eigene Datei. (Abb. 3)

 

Auf Youtube verweisen

Oft ist es praktischer, direkt auf Youtube zu verweisen, als ein Youtube-Video in der Webseite zu platzieren. In der Webseite selbst kann stattdessen ein Bild als Vorschau eingesetzt und zur Youtube-Website verlinkt werden. Mit dieser Methode wird auch gleich die Datenschutzproblematik umgangen, die immer dann auftritt, wenn ein Youtube-Video ohne Erlaubnis des Besuchers in der Uni-Webseite platziert wird.

  1. Zunächst ein Bild, das idealerweise eine Momentaufnahme aus dem Video zeigt, in einem Text&Medien-Element einsetzen.
  2. Die Youtube-Adresse in das zum Bild gehörende Link-Feld einsetzen
  3. In den Eigenschaften des Text&Medien-Elements im Reiter "Erweitert" in das Feld "CSS-Klasse für Content-Element" das Wort playbutton einsetzen. Dadurch wird automatisch ein Play-Button über dem Foto angezeigt, um die Film-Funktionalität zu verdeutlichen.
  4. Element speichern.

Beispiele

Hier Beispiele für Audio- und Video-Einbindung.

Webmioastrq7nervwham (in08ternet@wvuoegxnl.iode) (Stand: 07.11.2019)