PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

HTML5 Serie: Videos einbinden mit dem video-Tag

| 4 Kommentare

Im ersten Teil der HTML5 Serie habe ich euch gezeigt, wie ihr den YouTube Flash-Player durch einen HTML5 Video-Player ersetzen könnt. In diesem Teil der Serie geht es um die Umsetzung eines Video-Players in HTML5.

Seit HTML5 ist der <video>-Tag verfügbar. Es ist unschwer zu erkennen, dass er dazu dient Videos abzuspielen. Das faszinierende dabei ist, dass die Videos direkt im Quelltext eingebunden sind, sodass kein Flash-Player notwendig ist. Dadurch ergeben sich natürlich auch neue Möglichkeiten im Zusammenspiel mit CSS und JavaScript.


Videos einbinden

Die einfache Variante

Folgendes Code-Beispiel zeigt, wie ihr am Einfachsten ein Video einbindet:

1
2
3
<video width="480" height="360" src="test.ogv" autoplay>
    Dieser Browser unterstützt kein HTML5.
</video>

Wie man sieht, verhält sich der <video>-Tag fast genauso wie der <img>-Tag. Breite, Höhe und Quelle können übergeben werden. Außerdem sorgt autoplay dafür, dass das Video direkt abgespielt wird. Alles was zwischen dem öffnenden und dem schließenden Tag steht, wird bei den Browsern angezeigt, die kein HTML5 unterstützen.

Der Nachteil

Der Nachteil an der einfachen Variante ist, dass bestimmte Browser nur bestimmte Codecs unterstützen. Die im Beispiel verwendete .ogv-Datei würde nur im Firefox und im Chrome abgespielt werden, da nur diese Browser den Codec unterstützen.

Die unterstützten Codecs

Folgende Liste zeigt die unterstützten Codecs der Browser:

Mozilla Firefox:

  • Video-Codec: Theora
  • Audio-Codec: Vorbis
  • Container: Ogg (.ogv)

Apple Safari:
(ab iPhone OS 3 auch der mobilen Version)

  • Video-Codec: H.264
  • Audio-Codec: AAC
  • Container: MP4 (.mp4)

Google Chrome:

  • unterstützt alle oben genannten Codecs

Internet Explorer:

  • noch keine Information vorhanden

Die bessere Variante

Wie man sehen kann, brauchen wir eine allgemeine Variante, die jeden Browser abdeckt. Dazu geben wir ganz einfach mehrere Video-Quellen an. Jeder Browser kann sich so die Datei aussuchen, die er auch unterstützt.

1
2
3
4
5
6
<video  width="480" height="360" controls>
    <source src="test.ogv" type="video/ogg" />
    <source src="test.mp4" type="video/mp4" />
    
    Dieser Browser unterstützt kein HTML5.
</video>

Statt autoplay wurde in diesem Beispiel controls verwendet. Dadurch fügen wir die typischen Bedienelemente eines Players hinzu. Diese sehen je nach Browser unterschiedlich aus.

Übersicht der Attribute

  • width, heightBreite und Höhe des Videos
  • srcQuelle der Video-Datei
  • autoplayVideo wird automatisch abgespielt
  • autobufferVideo wird beim Seitenaufruf runtergeladen
  • postermit poster="poster.png" wird poster.png angezeigt, bevor das Video abgespielt wird

HTML5-Player Demos

Folgende Video-Portale haben bereits testweise einen HTML5-Player implementiert.

Dir hat der Artikel gefallen?
Dann abonniere doch den RSS-Feed!
  • Kannst auch ein Programm nennen womit ich meine aktuellen Videos in die entsprechenden Formate umwandeln kann? Ich hab damals etwas vernünftiges und günstiges für Windows gesucht. Leider fand ich nichts passendes.

  • Ich kann dir Format Factory für Windows empfehlen:

    http://www.formatoz.com/

  • Vielen Dank, ich werde es morgen testen.

  • Für Windows, um in OGG mit dem Theora-Codec umzuwandeln: Den Kommandozeilen-Konverter ffmpeg2theora plus die grafische Benutzeroberfläche TheoraConverter.NET. Findest du beides über Suchmaschinen.