Video

siehe auch Video oder Iframe mit 100% Breite einbetten CSS

siehe auch Video steuern mit Javascript

Einfaches Beispiel


<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 die das Standalone Attribut muted eingefügt werden.
muted
Der Sound ist deaktiviert. Es wird 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 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 & 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.