Wie kann man Video in HTML einfügen

Es gibt mehrere Möglichkeiten, ein Video an Ihre Website einzufügen. Die Tags <embed>, <frame> und <object> wurden zum Einfügen von Videos in ein HTML-Dokument verwendet. Aber sie sind jetzt veraltet. Jetzt werden wir betrachten, wie man die Tags <video> und <iframe> verwenden kann.

Verwenden Sie das Tag <video>, um ein Video in HTML hinzuzufügen

Das Tag <video> ird in HTML5 zusammen mit dem zugehörigen Tag <audio> hinzugefügt. Vor der Veröffentlichung von HTML5 konnte ein Video nur in einem Browser mit einem Plug-in (wie Flash) abgespielt werden. Das HTML5 Element <video> gibt eine Standardmethode zum Einbetten eines Videos in eine Webseite an. Das heißt, dass das Video durch Hinzufügen einer Video-URL zu einem Quellenattribut identifiziert wird, und man kann damit Videos einbetten, die vom Computer importiert oder von einer externen Webseite gehostet werden.

Für die grundlegende Verwendung müssen wir in einem HTML-Dokument nur die Video-URL zu dem Element hinzufügen, indem Sie das Element <source> zum Identifizieren der Video-URL und zum Hinzufügen des Attributs controls damit Webseite-Besucher die Videooptionen steuern können. Es ist auch wichtig, die Attribute width und height zu verwenden, um die Größe des Videos festzulegen. Lassen Sie uns ein einfaches Beispiel sehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Lorem Ipsum ist ein reiner Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker eine Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert geblieben ist.</p>
  </body>
</html>

Um das Videoelement zu verwenden, müssen mindestens die folgenden Attribute verwendet werden:

  • src: definiert die URL, unter der der Video-Content gehostet wird.
  • type: definiert das Format der Datei.
  • controls: muss angegeben sein, um die Wiedergabe des Inhalts zu steuern, oder kein visuelles Element wird angezeigt.

Darüber hinaus gibt es eine Reihe von optionalen Attributen, die verwendet werden können, um die Methode, wie die Videoinhalte geladen werden, zu beeinflussen. Diese Attribute sind:

  • autoplay: Gibt an, dass das Video abgespielt wird, sobald es fertig ist.
  • loop: gibt an, dass das Video jedes Mal, wenn es fertig ist, erneut beginnt.
  • poster: wählt ein Bild aus, das als Poster für das Video angezeigt werden soll, bis die Wiedergabe beginnt.
  • preload: sagt, dass der Autor denkt, dass das Video geladen werden soll, wenn die Seite geladen wird
Es ist sehr wichtig zu betonen, dass das Element <video> von allen modernen Browsern unterstützt wird.

Momentan unterstützt das HTML5 Tag <video> 3 Videotypen:

Format MIME-Typ
MP4 video/mp4
WebM video/webm
Ogg video/ogg

So wird die Video-Autoplay-Funktion eingestellt

Um die automatische Wiedergabe für das Video festzulegen, muss man nur das Attribut autoplay für das Tag <video> wie folgt einstellen:

<video width="320" height="240" autoplay>
Stellen Sie autoplay controls ein, wenn Sie die Option "controls" für das Autoplay-Video aktivieren möchten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p><b>Hinweis:</b> Das Attribut autoplay wird in manchen Mobilgeräten nicht funktionieren. </p>
  </body>
</html>

Videos von Youtube mit dem Tag <iframe> einfügen

Der einfachste Weg, Videos in HTML abzuspielen, ist die Verwendung von YouTube als Quelle. Zuerst müssen Sie das Video auf YouTube hochladen oder den Einbettungscode eines vorhandenen Videos kopieren und ins Element <iframe> in Ihrer Webseite platzieren.

Um den eingebetteten Link des YouTube-Videos zu erhalten, folgen Sie diesen einfachen Schritten:

  1. Öffnen Sie das Video auf YouTube und klicken Sie auf den Button share.
  2. Eröffnen Sie den Code Embed.
  3. Kopieren Sie den Link von Source.

Wenn Sie den eingebetteten Link kopieren, können Sie ihn in das HTML-Dokument als src Ihres Elements <iframe> hinzufügen. Definieren Sie auch width und height für Ihr Video. Es wird so aussehen.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <h2>Steve Jobs - How to Live before You Die</h2>
    <p>Steve Jobs, CEO und Mitbegründer von Apple und Pixar, drängt uns bei seiner Antrittsrede an der Stanford University dazu, unsere Träume zu verfolgen und die Chancen in den Rückschlägen des Lebens zu sehen - einschließlich des Todes selbst.</p>
    <iframe width="500" height="320" src="https://www.youtube.com/embed/lcZDWo6hiuI">
    </iframe>
  </body>
</html>