Mit HTML5 lassen sich auch Videos ganz einfach in Webseiten einbinden. Man braucht dazu jetzt weder Flash noch externe Player im iFrame: HTML5 hat einen eigenen Video-Tag, mit dem man Videos ganz einfach in die Webseiten einbauen kann. Neben dem Video selbst kann man auch verschiedene Option mit angeben: Etwa ob das Video automatisch gestartet oder stumm sein soll, oder ob man Player-Buttons anzeigen möchte. Außerdem kann man das Video per JavaScript steuern und zum Beispiel so starten oder stoppen.
Als Video-Formate werden in HTML neben OGG auch MP4: Je nach Browser ist die Unterstützung aber etwas unterschiedlich. Mittlerweile wird MP4 aber von allen Browsern erkannt, man sollte ein Video im OGG Format daher nur zusätzlich angeben:
<video>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
Mit diesem Video-Tag baut man in HTML ein Video ganz einfach ein. Neben <video> gibt man in der nächsten Zeile die Quelle an: Liegt das Video nicht im gleichen Ordner, muss man noch den Pfad ergänzen.
Den <video> Tag kann man aber auch noch um verschiedene Optionen ergänzen:
- autobuffer: Aktiviert die Zwischenspeicherung um das Video ruckelfrei abzuspielen
- autoplay: Startet das Video sofort wenn die Seite aufgerufen wird
- controls: Zeigt Buttons zum Starten und Stoppen des Videos an
- height: Die Höhe des Videos
- muted: Startet das Video ohne Ton
- poster: Ein Vorschaubild für das Video
- width: Die Breite des Videos
Je nach Browser funktionieren nicht alle der Optionen: Gerade “autoplay” wird oft nur unterstützt, wenn das Video auch mit “muted” stummgeschaltet ist. Ein Beispiel für ein eingebundenes Video in HTML könnte mit den Optionen so aussehen:
<video muted autobuffer autoplay width="100%" height="auto">
<source src="video.mp4" type="video/mp4">
</video>
Video in HTML: Per Javascript steuern
Möchte man das Video per Javascript kontrollieren, ist auch eine ID wichtig: Dann kann man das Video später per Skript starten oder stoppen und so seine eigenen Kontrolle-Flächen entwerfen. Mit diesem Code startet man das Video nicht automatisch, sondern per Javascript zeitversetzt nach einer Sekunde:
<video muted width="100%" height="auto" id="meinvideo">
<source src="video.mp4" type="video/mp4">
</video>
<script type="text/javascript">
setTimeout(function(){ document.getElementById("meinvideo").play(); }, 1000);
</script>
.htaccess bearbeiten
Werden die Videos trotz richtigem Pfad nicht angezeigt, muss man (oder der Webhoster) die .htaccess bearbeiten: Das ist die Konfigurationsdatei für den Apache Webserver. Hier muss man die richtigen Dateien für die Videos noch ergänzen, indem man diese Zeilen am Ende hinzufügt:
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
AddType video/ogg .ogv
AddType video/ogg .ogg