X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <video>

HTML Tag <video> ermöglicht dem Benutzer, Videodateien zu einer Webseite hinzuzufügen. Für die Wiedergabe von Videodateien ist es notwendig, einige Formate gleichzeitig einzustellen, da nicht alle Browser Videodateien aller Formate unterstützen.

Der Weg zur Datei wird durch das Attribut src oder das Element <source> eingestellt. Das Element <video> kann gleichzeitig einige Elemente <source> enthalten, jedes von denen legt verschiedene Variante des gleichen Videos mit verschiedenen Codecs fest.

Sowie kann das Tag <video> einen Text, der angezeigt wird, wenn der Browser das Format der Videodatei nicht unterstützt, enthalten.

Momentan gibt es 3 Videoformate: MP4/MPEG-4, OGG und WebM +. Für die Kompression der Videodaten und ihrer Wiedergabe werden spezielle Programme, Videocodecs verwendet. Codec ist eine Datei-Formel, die die Methode "der Verpackung" des Videoinhalts und seiner Wiedergabe bestimmt.

Für die Videodatei im Format MPEG-4 wird das Videocodec Н.264 und Audiocodec ААС verwendet. Für den Gebrauch von diesen Codecs ist eine Lizenz notwendig.

Für die Videodatei Ogg wird das Videocodec Theora und Audiocodec Vorbis mit dem offenen Code verwendet.

Für die Dateien im Format WebM + werden Videocodec VP8 und Audiocodec Vorbis verwendet. Für ihren Gebrauch keine Lizenz ist notwendig.

Syntax

HTML Tag <video> wird gepaart verwendet, sein Inhalt wird zwischen den Start- (<video>) und Endtags (</video> ) platziert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
    </video>
    <p>Einige Information über Video</p>
  </body>
</html>

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      video {
      width: 300px; 
      height: 220px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video 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>Einige Information über Video</p>
  </body>
</html>

Die Attribute controls, autoplay und loop können ohne Werteingabe verwendet werden. Wenn das Attribut eingegeben ist, ist die Funktion eingeschaltet, wenn das Attribut nicht eingegeben ist, ist die Funktion ausgeschaltet.

Attribute

Attribut Wert Beschreibung
autoplay autoplay Es bestimmt, dass das Video abgespielt wird, sobald es fertig ist.
controls controls Es stellt die eingebauten Elemente der Verwaltung der multimedialen Dateien (den Button der Wiedergabe/Pause, den Regler, der zuläßt, zu einem bestimmten Fragment des Filmes zu gehen, sowie den Regler der Lautstärke) dar.
height pixels Es definiert die Höhe des Mediaplayers.
loop loop Es bezeichnet, dass die Wiedergabe nach der Vollendung jedes Mal von Anfang an beginnen wird.
muted muted Es bezeichnet, dass das Video lautlos wiedergegeben werden soll.
Das Attribut wird in IE9 und früheren Versionen nicht unterstützt.
poster URL Es definiert die Darstellung, die bis zum Hochladen des Videos dargestellt oder bis der Benutzer den Button der Wiedergabe drücken wird.
preload auto
metadata
none
Es bezeichnet, wie das Video beim Hochladen der Seite beladen werden soll. Das Attribut wird ignoriert, wenn das Attribut autoplay angegeben ist.
src URL Es gibt die URL-Adresse der Videodatei.
width pixels Es definiert die Breite des Mediaplayers.

Das Tag <video> unterschtützt Globale Attribute und Globale Eventhandler.


Browser-Support

4+ 3.5+ 4+ 10.5+


Finden Sie das nützlich?

Ähnliche Artikel