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.
Es ist wahrlich kein Geheimnis mehr, dass Facebook sich als valable Plattform für Video-Content positionieren will. Eine aktuelle Studie…
Im Sommer 2018 wurden bei Google Ads die responsive Anzeigen im GDN durch die responsive Displaynetzwerk-Anzeigen ersetzt. Wieso es…
Video-Inhalte in eine Website integrieren, ohne dazu Plug-Ins einzusetzen – das geht ganz einfach mit HTML5! Doch wie erstellt…
Der Kanal-Trailer bietet dir die Möglichkeit neue Besucher kurz und knapp darüber zu informieren, worum es auf deinem Kanal…
Sie wollen ein wenig frischen Wind in ihre Firma bringen? Die klassischen Online Marketingtools wie Blogs, Newsletter, Google AdWords…
Ob Banner, interaktive Webseiten oder Videoeinbindungen – Flash ist out HTML5 ist in, so jedenfalls scheint es. In diesem…
keine Kommentare