HTML: Video einbinden – So gehts


Wenn du in HTML ein Video einbinden möchtest dann gibt es dafür das < video > Tag. Mit diesem lassen sich im handumdrehen Videos in deine Webseite einbinden.

Video mit HTML einbinden


Diser Code bindet ein Video mit der Höhe von 350 px und Breite von 250 px ein. Das Videoformat das du dafür benötigst ist im Mp4 Format. Es geht aber auch das Format OGG

<video width="350" height="250" controls>
  <source src="meinfilm.mp4" type="video/mp4">
</video>

Mit diesem Codebeispiel kannst du ein Video in HTML einbinden. Es wird dir dann der Player mit dem Video angezeigt.

HTML: Video einbinden Autoplay

Wenn du möchtest das dein Video sofort abgespielt wird wenn die Webseite geladen wurde dann fügst du einfach noch den Befehl controls autoplay hinzu

<video width="350" height="250" controls autoplay>
  <source src="meinfilm.mp4" type="video/mp4">
</video>

HTML Video Tag

Das html-Video-Tag wird verwendet, um Videoinhalte in ein HTML-Dokument einzubetten.

Das Video-Tag unterstützt mehrere Attribute, darunter das src-Attribut, das die URL der Videodatei angibt. Das Attribut controls fügt dem Videoplayer Schaltflächen zur Steuerung (Wiedergabe, Pause usw.) hinzu.

Das Attribut autoplay bewirkt, dass das Video automatisch abgespielt wird, wenn die Seite geladen wird. Das loop-Attribut bewirkt, dass das Video von vorne beginnt, wenn es das Ende erreicht hat.

Das Attribut muted schließlich bewirkt, dass die Audiospur des Videos standardmäßig stummgeschaltet wird. Alle diese Attribute sind optional; ohne das src-Attribut wird jedoch kein Video angezeigt. Das html-Video-Tag ist eine gute Möglichkeit, Multimedia-Inhalte in deine Webseiten einzufügen.

Jetzt HTML lernen

Das könnte dich interessieren!




weitere Beiträge zum Thema HTML


HTML: Gold Farbe HEX – Farbcode 🌈 – So gehts


HTML: Rote Farbe HEX – Farbcode 🌈 – So gehts


HTML: Schwarze Farbe HEX – Farbcode 🌈 – So gehts


HTML: Weiße Farbe HEX – Farbcode 🌈 – So gehts


HTML: Schrift fett schreiben – So gehts


PHP: If else Kurzschreibweise – So gehts


HTML: ol mit römischen Zahlen


CSS: 🌈 Farbverlauf erstellen – So gehts


CSS: Text mit Kontur & Rand erstellen – So gehts


HTML: Zeilenhöhe einstellen – So gehts


PHP: Anzeigen von Fehlermeldungen


PHP: Großbuchstaben umwandeln – So gehts!


PHP: Kommastellen abschneiden – So gehts!


HTML: Keine Umlaute 😲 – die Lösung


CSS: Text-Transform – Kleinbuchstaben & Großbuchstaben


CSS: Kanten abrunden – So einfach gehts


PHP: Verzeichnis öffnen – So gehts


PHP: Zugriff auf Verzeichnis beenden – So gehts


PHP: Datei schließen – So gehts


PHP: Verzeichnis/Ordner erstellen – So gehts


Schreibe einen Kommentar