siehe auch Video oder Iframe mit 100% Breite einbetten CSS
siehe auch Video steuern mit Javascript
siehe auch Video mit Tracks
<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>
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.
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
muted
eingefügt werden, damit der Sound stummgeschaltet ist.autoplay
. 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.<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"
Sehen Sie auf der folgenden Seite wie man Spuren und Tracks mit HTML5 erzeugen kann.