HTML 5 - Videoeinbindung

Präsentation zum Thema: "HTML 5 - Videoeinbindung"—  Präsentation transkript:

1 HTML 5 - Videoeinbindung
Grundlagen der Programmierung Sebastian Ottowitz

2 HTML 5 Nachfolger von HTML 4 Ähnlicher Aufbau
Neue Möglichkeit der Dateieinbindung Vorteil: Keine Plugins wie Flash nötig, bessere Unterstützung von Audio, Video und Grafiken

3 Einbindung Videotag: <video> </video>
Angabe der Quelle: <video src= " testvideo.mp4" >    Your browser does not support the video tag. </video> Einbindung der beiden Formatalternativen: <video>   <source src="testvideo.mp4" type="video/mp4" />   <source src="testvideo.ogg" type="video/ogg" />   Your browser does not support the video tag. </video>

4 Attribute width = Breite (in px) height = Höhe (in px)
Wie z.B bei image-Tag können dem Video-Tag diverse Attribute übergeben werden: width = Breite (in px) height = Höhe (in px) poster = URL eines Titelbildes, das vor Abspielen angezeigt wird autoplay = Wiedergabe wird automatisch gestartet autobuffer = Video wird sofort bei Seitenaufruf geladen muted = Das Video wird stumm abgespielt controls = Normale Bedienelemente werden angezeigt

5 Codecs Theora: h.264: Freier Videocodec
Verlustebehaftete Videodatenkompression Container .ogg h.264: Hohe Qualität bei Kompression Container .mp4

6 Browserkompatibilität
Firefox: Theora in Ogg-Container (Ton: Vorbis) Safari: h.264 in mp4-Container (Ton: AAC) auch für I-Phone einsetzbar Google Chrome: Theora und h.264 Internet Explorer: h.264