HTMLInternetWebdesign

HTML Videos einbetten und personalisieren – so geht´s

Wenn Sie Videos in HTML einbinden möchten, dann können Sie dies ganz einfach mit dem dafür vorgesehenen „<video>“-Tag machen. Wir zeigen Ihnen in diesem Artikel, wie Sie ganz einfach Videos in Ihre Webseite einbinden und weitere Elemente zum HTML-Schnipsel hinzufügen können, um das Video z.B. in Dauerschleife (Loop) wiedergeben können.

So binden Sie HTML-Videos in Ihre Webseite ein

Mit dem Video-Element, welches Sie einem neuen Tag hinzufügen, können Sie beliebige Videos Ihrer Webseite hinzufügen. Am besten eignet sich für Videos das Dateiformat MP4, da dieses Format von allen Browsern unterstützt wird.

Diesen Code müssen Sie eingeben, damit Sie ein Video einer HTML-Seite hinzufügen können:

Das Video-Element wird mithilfe von <video> geöffnet. Darin können Sie die Video-Datei mit Hilfe von „src=““>“  definieren. Geschlossen wird das Element wieder mit </video>. So könnte Ihr vollständiger Code wie folgt aussehen:

<video src="beispielvideo.mp4">HTML-Video eingebettet</video>

Falls das Video nicht geladen wird, wird der Text zwischen den beiden Elementen angezeigt. Dieser dient quasi als „Platzhalter“. Personalisieren können Sie Ihr Video-Tag außerdem mit Elementen, wie z.B. „height“ für die Höhe oder „width“ für die Breite. Wenn Sie möchten, dass Ihre Webseiten-Besucher das Video selbstständig starten und pausieren können, dann müssen Sie noch das Element „controls“ hinzufügen. Hierbei wird dann eine Steuerungsleiste Ihrem Video hinzugefügt.

Tipp: Bei src=““ können Sie auch eine beliebige URL eingeben um Videos von anderen Quellen einzufügen.

Weitere hilfreiche Elemente zum anpassen des Videoplayers

  • loop: Bewirkt das das Video immer wieder von neu abgespielt wird.
  • poster: Zeigt ein Thumbnail (Vorschaubild) an, wenn das Video geladen wird.
  • muted: Das Video wird ohne Ton wiedergegeben.
  • width: Hiermit geben Sie die Breite des Videoplayers an.
  • Height: Hierüber verändern Sie die Höhe des Videoplayers.
  • controls: Blendet eine Steuerungsleiste in den Videoplayer ein.

So könnte Ihr Code mit allen Elementen in einem Tag aussehen:

<video src=“beispielvideo.mp4“ poster=“vorschaubild.jpeg“ height=“400px“ width=“600px“ loop controls muted>HTML-Video eingebettet</video>

Hier erklären wir Ihnen, wie Sie in HTML Bilder einfügen können.

Das könnte Ihnen auch gefallen