Zum Inhalt springen

HTML5-Videos einbinden

keine Kommentare

bild_video

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.

 

Kategorie:  AllgemeinVideo

keine Kommentare

Dein kommentar zum artikel

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Tags & Verwandte artikel

Mehr Besucher für Ihre Internetpräsenz.


Unsere Website verwendet Cookies, die uns helfen, unsere Website zu verbessern, den bestmöglichen Service zu bieten und ein optimales Kundenerlebnis zu ermöglichen. Durch Nutzung dieser Webseite stimmen Sie der Verwendung von Cookies für Analysen, personalisierte Inhalte und Werbung zu. Weitere Informationen finden Sie in unserer Datenschutzerklärung.
Akzeptieren