Video

siehe auch Video oder Iframe mit 100% Breite einbetten CSS

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

Alternative Möglichkeit mit source Elementen

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

HTML5

Mit dem video Element kann man Videos ohne zusätzliche Plugins oder Player direkt in allen gängigen Browsern 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. Das Attribut wird benötigt, um das Video zu starten. Es sei denn man bietet eine alternative Abspielsteuerung mit Javascript an. Siehe meinen Javascript Tipp Video
autoplay: Das Video wird sofort abgespielt. Es funktioniert nur auf dem Server. Außerdem muss das Standalone Attribut muted eingefügt werden, damit der Sound stummgeschaltet ist.
muted: Der Sound ist deaktiviert. Es wird außerdem benötigt, um ein Video mit autoplay beim Laden der Seite abzuspielen, siehe autoplay.
preload: Mit preload="none" wird das Video nicht vorausgeladen. preload="auto" bedeutet, dass der Browser sofort mit dem Vorausladen des Videos beginnt. 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 das zentrale Element der Seite ist. Letzendlich bestimmt der Browser, ob das Video vorausgeladen wird. Die Spezifikation empfiehlt für die Browserhersteller den Standardwert metadata. Mit preload="metadata" werden nur Daten wie Spieldauer, Auflösung, Qualität etc. geladen, aber nicht das Video selbst. Gerade wenn man mehrere Videos auf der Seite eingebunden hat, sollte man preload="metadata" oder preload="none" setzen. Bedenke, dass die Nutzer auf Smartphones in der Regel nur ein begrenztes Datenvolumen haben.
loop: Mit loop = Schleife wird das 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 & 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. Wenn man die Ausmaße des Videos ändern möchte, sollte man es mit CSS machen.

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.