Videos in deine Webseite einbinden – HTML 5 Tutorial (3)

Im letzten Teil dieser Artikelreihe hast du gelernt wie man Überschriften, Absätze und Bilder in HTML ausgibt. In diesem Artikel verrate ich dir wie du Videos in deine Webseite einbindest. Also lass uns loslegen 🙂

Um loszulegen benötigst du natürlich ein Video. Du kannst ein eigenes Video verwenden oder das folgende herunterladen.

Mache bei dem Video einen Rechtsklick. Du kannst es dann bequem auf deinem Gerät speichern.

Du hast ein Video ausgewählt ? Na dann kann es losgehen 🙂

Videos in deine Webseite einbinden

Ein Video in deine Webseite einzubinden ist dank HTML 5 ein Kinderspiel. Es gibt nämlich ein seperates Tag dafür. Wie sollte es auch anders sein, es ist das <video> Tag. Innerhalb des öffnenden video Tags geben wir den Pfad zu unserer Zieldatei ein. Außerdem benötigen wir das Attribut controls. Setzen wir dieses Atribut nicht, haben wir keine Möglichkeit das Video zu bedienen. Durch die Angabe von controls werden folgende Buttons hinzugefügt:

  • Play
  • Pause
  • Lautstärkeregler
  • Full Screen Modus
  • Untertitel (wenn vorhanden)

Trage nun folgenden Code in dein HTML Dokument ein. Ersetze dabei die source Angabe durch den Pfad zu deiner Zieldatei.

<video src="Pfad zu deinem Video" controls>

</video>

Du solltest nun das Video auf deiner Seite angezeigt bekommen. Das Video wird in der Orignalgrösse auf deiner Webseite ausgegeben. Du möchtest das Video etwas kleiner darstellen? Hier kommen wir an einen Punkt, an dem reines HTMl nicht mehr ausreicht. Was wir nun benötigen ist eine kleine CSS Angabe. Mit CSS können wir das Aussehen unserer Webseite anpassen. Zum Beispiel Farben definieren oder die Größe eines Elements bestimmen.

Erweitere deinen Code nun um folgende Angabe:

style="width:550px"

Die Angabe schreiben wir, für Testzwecke, direkt in den Html Code. Diese Art der Definition nennt man einen Inlinestyle. Normalerweise sollte man das CSS nicht direkt in HTML schreiben. Doch dazu später mehr wenn wir uns mit CSS befassen.

<video src="Pfad zu deiner Datei" controls style="width:550px">

</video>

Dein Video sollte jetzt in einer angemessenen Größe (550px) auf deiner Webseite erscheinen.

Herzlichen Glückwunsch, du hast dein erstes Video auf deiner Seite eingebunden.

Nun gibt es noch andere Möglichkeiten ein Video auf deiner Webseite darzustellen. Zum Beispiel kannst du es automatisch abspielen wenn der Besucher deine Seite aufruft.

Videos automatisch abspielen lassen

Um ein Video automatisch abzuspielen, benötigen wir das Attribut autoplay. Dieses schreiben wir wieder in das öffnende Video Tag.

<video src="Pfad zu deiner Datei" controls style="width:550px" autoplay>

</video>

Dein Video wird nun direkt abgespielt wenn der Besucher deine Webseite betritt. Diese Funktionsweise eignet sich zum Beispiel wenn das Video als Hintergrund dienen soll. Allerdings wird in so einem Fall das Attribut controls entfernt bzw. weggelassen.

Nun kannst du nach Herzenslust Videos in deine Webseite einbinden. Videogalerien werden immer beliebter und sind ein Besuchermagnet. Bei einer neuen Webseite sorgen Videos oft für die ersten Besucher.

Im nächsten Teil unserer Artikelreihe zeige ich dir wie du Audiodateien in deine Webseite einbindest. Komm regelmäßig vorbei und halte Asschau nach dem nächsten Teil.

Bis dann 🙂


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.