HTML5-Videos einbinden
Mit HTML5 lassen sich Videoinhalte ganz einfach ins Web einbinden. Wie das geht zeigen wir in diesem Blogbeitrag.
Vor HTML5 funktionierten Videos nur über spezielle Technologien, wie z.B Adobe Flash, das als Plugin im Browser installiert werden musste. Seit der Einführung von HTML5 können Videos nun über ein eigenes Video-Tag in die Webseite eingebunden werden. Über die Vorteile haben wir letzte Woche berichtet. Und so funktioniert die Einbindung:
Videoinhalte werden über den Befehl <video> eingebunden. Die Angabe zum Video wird zwischen dem Anfangs-Tag und dem End-Tag eingebettet:
<video>
<source src=“video.mp4“ type=“video/mp4“>
<source src=“video.ogg“ type=“video/ogg“>
<source src=“video.webm“ type=“video/webm“>
</video>
Browserunterstützung
Problematisch bei HTML5-Videos sind die verschiedenen Browser- Formate: Ogg-Thora, WebM und MP4/H.264. Chrome versteht alle Formate. Firefox und Opera können WebM- und Ogg-Videos abspielen. Internet Explorer ab Version 9 und Safari setzen auf H.264.
Welches Format sich am Ende durchsetzen wird, ist noch nicht abzusehen. Am besten stellt man alle Formate bereit und bindet sie mit dem source-Element ein, wie im Beispiel zu sehen ist. Der Browser sucht sich dann das Format aus, das er unterstützt.
Eine sehr gutes und kostenloses Tool zum Konvertieren der Videos ist der Miro Video Converter.
Atribute
Dem HTML-Tag können zudem Attribute hinzugefügt werden. Autoplay startet das Video direkt beim Aufruf der Webseite. Controls blendet Play-/Pause und weitere Buttons und Steuerelemente ein. Mit width und height kann die Grösse angepasst werden. Und mit dem Attribut poster kann man ein Bild festlegen, das an der Stelle des Videos erscheint, solange es nicht gestartet wird.
keine Kommentare