Java Reference
In-Depth Information
Listing 3.2■
Einfache Einbindung eines Videos nach HTML5
<video src="lib/videos/gleitschirm.ogg">
Dieser Browser ist nicht kompatibel zu HTML 5</video>
Wenn der Browser HTML5 unterstützt und den Codec der Videodatei versteht, wird das
Video abgespielt, wobei man in der Regel ein paar Attribute zum Steuern des integrierten
Mediaplayers angeben muss oder sollte:
Tabelle 3.1■
Attribute beim video-Element
Attribut
Beschreibung
autoplay
Angabe, ob das Video automatisch gestartet werden soll oder nicht. Ist sie ge-
setzt, startet das Video automatisch. Fehlt sie, dann nicht.
controls
In der Regel werden Bedienelemente benötigt, damit der Nutzer das Video z. B.
pausieren oder spulen kann. Die Browser bringen deshalb von Haus aus Stan-
dardbedienleisten mit, die allerdings unterschiedlich aussehen können. Ist das
Attribut vorhanden, werden Steuerelemente angezeigt. Meist wird die Bedien-
leiste ausgeblendet, wenn sich der Mauszeiger aus dem Bereich des Media-
players bewegt.
Höhe des Anzeigebereichs des Mediaplayers in Pixeln. Idealerweise sollte die
Größe mit der nativen Aulösung der Videodatei übereinstimmen.
height
Ist das Attribut vorhanden, wird das Video nach dem Ende wiederholt.
loop
Angabe von Metadaten
Metadata
Der URL eines Bilds, das das Video repräsentieren soll, wenn das Video noch
nicht abgespielt wird. Dies wird unter anderem angezeigt, solange das Video
noch nicht geladen ist oder wenn es Probleme mit der Videodatei gibt.
poster
Die Angabe, ob das Video vor dem Abspielen (beim Laden der Webseite) vor-
geladen werden soll.
preload
Der URL der Videodatei
src
Die Breite des Anzeigebereichs des Mediaplayers in Pixeln. Idealerweise sollte
die Größe mit der nativen Aulösung der Videodatei übereinstimmen.
width
Betrachten wir ein vollständiges Beispiel
(kap3_4.html):
Listing 3.3■
Einbindung von Videos in HTML5
...
<body>
<h1>Videos in HTML5 - einfache Variante</h1>
<video src="lib/videos/gleitschirm.ogg" width="320" height="240"
autoplay controls loop>Dieser Browser ist nicht kompatibel zu HTML 5
</video>
</body>
</html>
Search WWH ::
Custom Search