Strukturierende Elemente in HTML 5

Übersicht
HTML5 führt neue Elemente ein, um Video- und Audiodaten nativ im Browser abspielen zu können. Im Vergleich dazu laufen z.B. Flash Videos in einer eigenen Umgebung und sind nicht Teil eines HTML-Dokuments. Mit Hilfe von CSS lassen sich Videoelemente genau wie alle anderen HTML-Elemente anpassen, mit JavaScript kann der Dokumentinhalt auf einfache Art mit dem gerade abgespielten Video synchronisiert werden.

1. Das neue Element <video>
Mit dem folgenden Codeausschnitt kann ein Video im MP4-Format auf einfachste Art eingebettet werden:
<video src="videodatei.mp4"></video>

2. Unterstützung verschiedener Videoformate
Allerdings kann nicht garantiert werden, dass dieses Format von allen Browsern abgespielt werden kann. Mit dem <source> Element können daher verschiedene Videoformate eingebunden werden, falls der Browser eines Anwenders ein bestimmtes Format nicht unterstützt:
<video>
<source src="videodatei.mp4" type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"‘ />
<source src="videodatei.webm" type=’video/webm; codecs="vp8, vorbis"‘ />
</video>

Aus Effizienzsicht ist das type-Attribut von entscheidender Bedeutung, falls mehrere Formate angeboten werden. Mit seiner Hilfe kann der Browser bestimmen, welches Format heruntergeladen und abgespielt werden soll.

3. Konvertierung
Um existierende Videos in die erwähnten Formate umzuwandeln, kann ein geeignetes Konvertierungsprogramm (z.B. Miro Converter) verwendet werden.

4. Beispieldokument mit eingebettetem Video
<!DOCTYPE html>
<html>
<head> Videobeispiel
</head>
<body>
<video>
<source src="videodatei.mp4" type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"‘ />
<source src="videodatei.webm" type=’video/webm; codecs="vp8, vorbis"‘ />
</video>
</body>
</html>

5. Neue strukturierende Elemente in HTML 5 Anhand der neuen semantischen Elemente in HTML 5 kann ein Dokument in mehrere Bereiche eingeteilt werden. Anstatt wie bisher das generische <div> Element zu verwenden, können Bereiche nun direkt mit passenden Elementen ausgezeichnet werden, die das Dokument strukturieren und den Bereichen eine Bedeutung verleihen. Folgende strukturierende Elemente stehen in HTML 5 zur Verfügung:

• <article>
• <aside>
• <dialog>
• <figure>
• <footer>
• <header>
• <nav>
• <section>

Auf diese Weise kann zum Beispiel in einem <section> Bereich ein Video abgespielt werden während synchron im entsprechenden <footer> ein passender Untertitel angezeigt wird.