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>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+ |
Übe dein Wissen
