Videos hinzufügen

Videos mit HTML5 einbinden

Wichtig: Seit dem neuesten OpenCms-Update lässt der Editor den HTML-Video-Tag nur dann zu, wenn wir in den Eigenschaften des Seitenelements das Feld "content-conversion" auf "false" setzen. 

HTML5 bringt alle benötigten Funktionen mit, damit Ihr Browser Videos ganz ohne zusätzliche Plug-ins abspielen kann. HTML5 nutzt dazu das <video>-Element. Je nach verwendetem Browser gelingt so die Wiedergabe von Clips entweder im MP4- (H.264), im WEBM- oder im OGG-Format.

Folgenden HTML5-Video-Tag im Quellcode einfügen

<video width="640" height="480" poster="vorschaubild.jpg" controls="controls">
	<source src="videoname.mp4" type="video/mp4" />
	<source src="videoname.webm" type="video/webm" />
	<source src="videoname.ogg" type="video/ogg" />
	Schade – hier käme ein Video, wenn Ihr Browser HTML5 Unterstützung hätte. 
</video>

Bitte beachten Sie, dass die Pfade zum Video und zum Vorschaubild stimmen (vollständigen Pfad angeben).

Bedeutung der einzelnen Attribute

  • width – die angezeigt Breite der Videos
  • height – die angezeigt Höhe des Videos
  • audio="muted" stellt den Ton des Videos auf stumm
  • poster – ein Bild, das angezeigt wird, wenn das Video noch nicht gestartet wurde. Das Attribut poster wird von nicht allen Browsern unterstützt.
  • autoplay – das Video wird sofort gestartet, wenn ein Besucher die HTML-Seite aufruft
  • controls – es werden für die Steuerung Steuerelemente (controls) angezeigt, dass das Video gestoppt, gestartet und an eine andere Stelle gesprungen werden kann.
  • autobuffer - Zwischenspeicherung aktivieren, damit Video möglichst ruckelfrei wiedergegeben werden kann.

Browserkompatibilität des Video Tags

Format MS IE Firefox Opera Chrome Safari
mp4 9.0+ NO NO 5.0+ 3.0+
webM NO 4.0+ 10.6+ 6.0+ NO
ogg NO 3.5+ 10.5+ 5.0+ NO

Alle aktuellen Browser Internet Explorer ab der Version 9 können das Video Tag interpretieren.

Video aus YouTube einbinden
  1. Klicken Sie unter dem Video auf den Link Teilen.
  2. Klicken Sie auf den Link Einbetten.
  3. Bildgröße auswählen.
  4. Kopieren Sie den Code aus dem eingeblendeten Feld.
  5. Füge den Code in die Website im HTML-Code ein.

Beispiel:

<iframe src="//www.youtube.com/embed/n4aOPxnjSxo" width="640" height="480" frameborder="0" allowfullscreen="allowfullscreen">

 

Einbettung eines einzelnen Videos:

Bitte folgenden Datenschutzhinweis hinzufügen!

Auf dieser Website werden Plugins von Youtube.de/Youtube.com verwendet. Wenn Sie mit einen solchen Plugin versehene Internetseiten unserer Website aufrufen, wird eine Verbindung zu den Youtube-Servern hergestellt und dabei das Plugin durch Mitteilung an Ihren Browser auf der Internetseite dargestellt. Hierdurch wird an den Youtube-Server übermittelt, welche unserer Internetseiten Sie besucht haben. Sind Sie dabei als Mitglied bei Youtube eingeloggt, ordnet YouTube diese Information Ihren jeweils persönlichen Benutzerkonten dieser Plattformen zu. Bei Nutzung von diesen Plugins wie z.B. Anklicken/Start-Buttons eines Videos oder Senden eines Kommentars, werden diese Informationen Ihrem z.B. YouTube-Benutzerkonto zugeordnet, was Sie nur durch Ausloggen vor Nutzung des Plugins verhindern können.

Video aus Vimeo einbinden

Beispiel:

<iframe src="//player.vimeo.com/video/32844440" width="640" height="480" frameborder="0" allowfullscreen="allowfullscreen">

Bitte folgenden Datenschutzhinweis hinzufügen!

Auf dieser Website werden Plugins von Vimeo.com verwendet. Wenn Sie mit einen solchen Plugin versehene Internetseiten unserer Website aufrufen, wird eine Verbindung zu den Vimeo-Servern hergestellt und dabei das Plugin durch Mitteilung an Ihren Browser auf der Internetseite dargestellt. Hierdurch wird an den Vimeo-Server übermittelt, welche unserer Internetseiten Sie besucht haben. Sind Sie dabei als Mitglied bei Vimeo eingeloggt, ordnet Vimeo diese Information Ihren jeweils persönlichen Benutzerkonten dieser Plattformen zu. Bei Nutzung von diesen Plugins wie z.B. Anklicken/Start-Buttons eines Videos oder Senden eines Kommentars, werden diese Informationen Ihrem z.B. Vimeo-Benutzerkonto zugeordnet, was Sie nur durch Ausloggen vor Nutzung des Plugins verhindern können.