1239120

HTML5-Praxisbeispiele

01.11.2012 | 11:12 Uhr | Thorsten Eggeling

Mit ein paar Zeilen HTML5-Code lässt sich ein Video-Player schnell in die Webseite einbauen.
Vergrößern Mit ein paar Zeilen HTML5-Code lässt sich ein Video-Player schnell in die Webseite einbauen.

Wer die Fähigkeiten von HTML5 selbst ausprobieren möchte, findet dazu zahlreiche Beispielseiten im Internet. Die komplette technische Dokumentation gibt es beim für die Standardisierung zuständigen World Wide Web Consortium (W3C) . Google bietet zahlreiche Demo-Programme zum Ausprobieren von HTML-Funktionen an. Hier gibt es auch Schritt-für-Schritt-Anleitungen und Beispielprogramme. Unter der Adresse http://diveintohtml5.info können Sie kostenlos das Buch „Dive Into HTML5“ von Mark Pilgrim lesen. Es führt in die Grundlagen von HTML5 ein und erläutert die Funktionen mit vielen Beispielen. Weitere Beispiele finden Sie auf den Seiten HTML 5 Demos and Examples und HTML5 Website Showcase: 48 Potential Flash-Killing Demos . Wenn Sie prüfen möchten, welche HTML5-Funktionen Ihr Browser unterstützt gehen Sie auf The HTML5 Test und HTML5 & CSS3 Readiness .

Videos per HTML5-Tag in Webseiten einbauen

Ein kleines Beispiel zeigt, wie einfach es ist, ein Video über HTML5 in die eigene Homepage zu integrieren. Damit das Video sich in allen Browsern abspielen lässt, muss die Video-Datei in mindestens zwei Formaten vorliegen: Als MP4-Datei mit einem H.264 komprimierten Video-Stream und im WebM-Format. Zum Konvertieren eines Videos in diese Formate können Sie den kostenlosen Miro Video Converter (www.pcwelt.de/306483) verwenden.

Danach erstellen Sie in einem Text- oder HTML-Editor Ihrer Wahl eine HTML-Datei mit dem folgenden Inhalt:

<!DOCTYPE html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Testvideo</title>
</head>
<body>
<video id="myVideo" width="640" height="360" controls poster="test.jpg">
          <source src="TestVideo.mp4" type="video/mp4" />
          <source src="TestVideo.webm" type="video/webm" />
</video>
</body>
</html>

Passen sie die Dateinamen hinter „<source src=> und die Größenangaben hinter „width“ und „height“ entsprechend an. Bei der Größe kommt es nur auf das Seitenverhältnis an. 640 und 360 im Beispiel ergibt 1,77, das ist ein Seitenverhältnis von 16:9. Die Angabe „controls“ sorgt dafür, dass der Browser Schaltflächen wie „Start“ und „Pause“, einen Fortschrittsbalken und einen Lautstärkeregler einblendet. Bei Firefox und Internet Explorer erscheinen die Steuerelemente erst, wenn Sie mit der Maus an den unteren Rand des Videos fahren. Die Bilddatei hinter „poster=“ sorgt dafür, dass ein Vorschaubild für das Video erscheint, wenn die Webseite geöffnet wird. Erstellen Sie ein Bild mit den Abmessungen des Videos. Legen Sie die HTML-Datei zusammen mit dem Bild und den Video-Dateien in einem Ordner ab. Dann genügt ein Doppelklick auf die HTML-Datei, um das Video im Browser zu öffnen.

 

PC-WELT Marktplatz

0 Kommentare zu diesem Artikel
1239120