Video

Einfaches Beispiel


<video controls width="640" height="360" poster="img/test.jpg">
	<source src="media/video/test.ogv">
	<source src="media/video/test.mp4">
</video>

HTML5

Auch mit dem video Element kann man nun endlich Videos ohne zusätzliche Plugins oder Player direkt in allen gängigen Browsern abspielen abspielen.

Tipp: Der Freemake Video Converter ist für die Umwandlung in viele Video Formate geeignet.

Will man mit dem Adobe Media Encoder einen Film in ein mp4 Video konvertieren, so wählt man das Format H264 und kann es dann als mp4 Datei abspeichern.

Attribute im video Element

controls
Der Player blendet einen Player ein.

autoplay
Das Video wird sofort abgespielt. Achtung! Sofern man kein controls und kein autoplay angibt hört man auch nichts, es sei denn man steuert es über Javascript.

preload
Hier beginnt der Browser sofort mit dem Vorausladen des Videos. Es ist nur dann sinnvoll, wenn man davon ausgehen kann, dass der User das Video abspielt. Das ist zum Beispiel der Fall, wenn das Video wenn es das zentrale Element der Seite ist. Letzendlich bestimmt der Browser, ob das Video vorausgeladen wird. mit preload="auto" kann man den Wunsch anmelden, dass es vorausgeladen wird. Mit preload="metadata" werden nur Daten wie Spieldauer, Auflösung, Qualität etc. geladen, aber nicht das Video selbst.

loop
Mit loop = Schleife wird der Video wieder von vorne abgespielt, wenn das Ende erreicht ist.

src
Wie beim audio Tag ist der Sinn des src- Attributs, dass hier das bevorzugte Format angegeben wird, wenn man mehrere Datein in dem source Element angegeben hat.

poster
Hier kann man eine Grafik referenzieren, die angezeigt wird, solange kein Video abgespielt wird. Für die Wertzuweisung gelten die üblichen Regeln der Referenzierung.

width und height
Wie beim img Element sollte man hier die tatsächliche Breite und Höhe des Videos angeben, um den Browser beim Aufbau der Seite zu unterstützen.

Attribute im source Element

type
Hier können Sie den MIME- Type angeben. Er beginnt in diesem Fall mit video/ . Außerdem kann man mit Semikolon getrennt einen Video Codec angeben. RFC 4281- The Codecs Paramater for "Bucket" Media Types. Verwenden Sie die codecs nur, wenn Sie genau wissen, dass der Codec auch vorhanden ist.

<source src="media/video/test.ogv" type='video/ogg; codecs=theora, vorbis'>

type="video/mpeg"
type="video/quicktime"
type="video/x-msvideo"

media
Mit dem media Attribut gibt man an für welche Medientypen die Audiodatei geeignet ist. Die Voreinstellung ist media="all"

Zusätzliche Spuren und Tracks

Sehen Sie auf der folgenden Seite wie man Spuren und Tracks mit HTML5 erzeugen kann.