zur « Themenübersicht Dit&Dat

Diverses - Sparte

Eingetragen / aktualisiert am 13.11.2014

Hintergründiges

HTML5  (HyperText Markup Language) als Nachfolger von HTML4 existiert schon einige Jahre, aber erst seit dem 28. Oktober 2014 hat das World Wide Web Consortium (W3C) die fertige HTML5-Spezifikation („W3C Recommendation“) vorgelegt und zur Kernsprache des Internets erkoren. Neu ist bei HTML5 insbesondere die Multimedia-Unterstützung!

Ich hatte mich bisher geweigert HTML5 für Videos einzusetzen, da es noch zu viele Kompatibilitätsprobleme mit den unterschiedlichen Browsern gab und teils nur bestimmte Video-Dateiformate abspielten, wenn sie denn überhaupt HTML5 unterstützten. Vielleicht ist es dem hohen Marktanteil von Apple zu verdanken, die sich schlicht weigern Flash abzuspielen, dass die Video-Unterstützung mit HTML5 gerade im letzten Jahr deutliche Fortschritte gemacht hat. Bei YouTube ist HTML5 standard, Flash wird nur noch als Fallback eingesetzt.
Mittlerweile ist es so, dass sämtliche Browser die Video-Einbindung mit HTML5 unterstützen, auch der H.264-Codec hat sich durchgesetzt und sich bis zum Firefox und InternetExplorer herum gesprochen hat.
Der große Vorteil ist, dass kein separater Player oder etliches an Code zur Einbindung mehr benötigt wird!

Videos mit HTML5 in Homepage einbauen

Diese kleine Anleitung dient den Leuten, die genug Platz auf ihren Server haben und sich von YouTube unabhängig machen möchten.

Die einfachste Art, ein Video einzubauen erfolgt zum Verständnis mit diesem kleinen Code:

<video src="demo.mp4" controls autoplay >Ihr Browser unterstützt kein HTML5</video>

Dies sieht allerdings noch recht unschön aus und man sollte noch einige Funktionen und Formatierungen mit einbauen:

Im folgenden Fall sucht sich der jeweilige Player das Beste Dateiformat aus, bzw. zu dem er zum Abspielen in der Lage ist. Das bedingt natürlich, dass ihr euer Video in diesen 2 Formaten hoch ladet.
Das Konvertieren dauert, ebenso das Hochladen auf dem Server, dann geht auch endlos Platz auf dem Server verloren. Zeit und Platz wird hier vergeudet, deshalb beschränke ich mich auf das .mp4-Format, das wohl am weitesten verbreitet ist und in den neuen Versionen von InternetExplorer, Firefox und Google Chrome läuft. Deshalb würde ich die Zeile mit dem .ogg weg lassen.

Das Element "poster" dient als Platzhalter, so lange das Video geladen wird.

Das Element "controls" teilt dem Browser mit, dass die integrierten Wiedergabesteuerelemente angezeigt werden sollen. Diese können bei den einzelnen Browsern unterschiedliche Funktionen und ein anderes Erscheinungsbild aufweisen. Die Steuerelemente für Wiedergabe und Pause, eine Statusanzeige sowie Schaltflächen für das vorwärts oder rückwärts Springen im Video und eine Zeitanzeige sind allerdings überall vorhanden. Während der Wiedergabe eines Videos werden diese Steuerelement i. d. R. ausgeblendet und erst dann wieder eingeblendet, wenn der Benutzer die Maus über den Player bewegt.

Das Element "autoplay" sorgt dafür, dass die Wiedergabe des Videos unmittelbar nach dem Laden startet.

Wichtig ist noch, dass "width" und "height" angegeben werden, ansonsten wird das Video in seiner vollen Größe angezeigt! Das Vorschaubild sollte natürlich auch diese Größe haben!

<video controls autoplay width=720 height=405 poster="demo.jpg">
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogg" type="video/ogg"/>
<p>Ihr Browser unterstützt kein HTML5</p>
</video>

Fallback für ältere Browser:
 Sollte ein Browser kein HTML5 beherrschen, greift der auf Flash zurück. Wie man dies mit Flash und einem separaten Player realisiert, habe ich auf meiner vor Jahren erstellten Seite beschrieben:
Videos in Homepage einbinden >>
Meine Meinung: Wer heute Multimediale Dateien abspielen möchte, hat auch einen modernen Browser, mal abgesehen davon, dass das Surfen mit solchen Oldtimern nicht ungefährlich ist.
Ich finde, diese Leute kann man ruhig vernachlässigen, der immense Aufwand steht in keinem Verhältnis zum Nutzen.

<video controls autoplay width=720 height=405 poster="demo.jpg">
<source src="demo.mp4" type="video/mp4" />
<object>
<embed src="
demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" />
</object>
Ihr Browser unterstützt kein HTML5
</video>

Hier dann eine HTML5 Demo in Full HD:

 

Videos mit HTML5 in Homepage einbinden