Videos und Audio mit HTML5 in Webseiten abspielen

1.1.2014

Inzwischen können fast alle modernen Web-Browser HTML5 verstehen. Dadurch lassen sich ganz einfach Video- und Audiodateien abspielen. Selbst das Streaming von Radiosendern ist damit möglich. Als Alternative werden zum Schluss und zur Vollständigkeit halber Einbettungen mit VLC und dem Mediaplayer aufgeführt.

Nachtrag vom 15.11.2023: Wie man weiter unten sieht, funktionieren einige Beispiele auf dieser Seite nicht mehr, weil sie exotische Plug-Ins benötigen oder sich die Browsertechnologie geändert hat.

Inzwischen verwende ich WordPress als CMS. Die MP4-Videos lassen sich ganz einfach mit Drag and Drop an die entsprechende Stelle der Seite ziehen. Einfacher geht es wirklich nicht mehr. Doch es gibt einen Haken. Damit die MP4-Video auf allen Plattformen und auf Android laufen, mussten die MP4-Videos mit dem Programm Videopad erstellt werden. Eine andere Lösung habe ich nicht gefunden. Jedenfalls ist es bei kurzen Videos die nur ein paar Minuten von Vorteil, wenn sie auf dem eigenen Server gespeichert sind. Youtube scheint immer wieder den Einbettungscode zu ändern, was eine vermehrte Pflege der Seiten mit sich zieht. Dann lieber selber hosten.

MP3-Audio-Dateien lassen sich in WordPress ganz einfach mit Drag and Drop in die entsprechende Stelle der Webseite ziehen. Das funktioniert problemlos und ist kinderleicht.

Zusätzliche Software, Plug-Ins oder JavaSript-Codes sind bei der Lösung mit HTML5 nicht nötig. Es muss nur ein ganz einfacher Code in den HTML-Qelltext eingefügt werden. Nachfolgend einige lauffähige Beispiele, die wegen ihrer einfachen Art auf fast allen modernen Browsern funktionieren.

Videos mit HTML5-Tag einbinden: Hier ein Beispiel an einem Video:

Ein Video, das mit Hilfe von HTML5 eingebunden wurde.

Der HTML-Code lautet wie folgt:

Mit width wird die dargestellte Pixel-Breite des Videos festgelegt. Die richtige Höhe wird automatisch bestimmt. Die meisten Browser können Videos im OGG-Format wiedergeben. Der Internet-Explorer kann allerdings kein OGG darstellen, dafür aber MP4, was wiederum nicht alle Browser darstellen können. Also sollten die Videos im OGG- und im MP4-Format vorliegen.

Konvertierung der Video-Formate: Inzwischen gibt es viele kostenlose Video-Konvertierungsprogramme. Mit VLC scheiterte leider das Konvertieren. Wenn ein Browser kein HTML5 unterstützt, dann erscheint in meinem Beispiel der Text “Leider kann Ihr Browser keine HTML5-Videos darstellen.”. Für die Erzeugung des OGG-Formats kam bei mir der Theora-Converter ( http://sourceforge.net/projects/theoraconverter/ ) zum Einsatz. Die Dateiendung ogv muss nur in ogg unbenannt werden. MP4-Dateien stellte ich mit dem Programm Super ( http://www.erightsoft.com/SUPER.html ) her.

Audio-Dateien mit einem HTML5-Tag einbinden: Nachfolgend kann eine MP3-Audio-Datei abgespielt werden:

Der HTML-Code ist ganz einfach und erklärt sich von selbst:

Zu hören ist ein Bimmelton (http://www.jasoft.de/bimmel/glas.mp3) durch Anschlagen eines Messers an ein Weinglas. Meines Wissen können alle gängigen Browser MP3-Dateien abspielen. Unter Lubuntu mit Firefox hatte das Abspielen jedoch nicht funktioniert. Offenbar muss noch eine weitere Audio-Datei im OGG-Format hinzugefügt werden. Diese kann mit VLC erzeugt werden.

Da offenbar nicht alle Browser mp3 abspielen können, was unter Linux der Fall sein kann, wurde dem nachfolgenden Beispiel noch eine Audio-Datei im OGG-Format hinzugefügt:

Dazu wurde folgender Code verwendet:

<audio controls>
src=”http://www.jasoft.de/bimmel/glas.ogg” type=”audio/ogg”>

src=”http://www.jasoft.de/bimmel/glas.mp3″ type=”audio/mpeg”>
Leider kann Ihr Browser kein HTML5-Audio abspielen.
</audio>

Wichtig ist die Reihenfolge, damit die OGG-Datei zuerst aufgerufen wird. Die glas.ogg wurde mit Hilfe des Programms VLC auf Grundlage der glas.mp3 erzeugt.

Web-Radio mit einem HTML5-Tag abspielen: Fast nach dem gleichen Muster erfolgt das Streaming von Web-Radiostationen mit HTML5:

Der Code lautet wie folgt:

Dort, wo normalerweise die URL des MP3-Files steht, wird nur die Streamingadresse des Webradios eingetragen. Im Beispiel handelt es sich um P1 des schwedischen Radioprogramms.

Vor- Nachteile gegenüber Youtube: Wer seine Videos in Youtube hochlädt, braucht sich um  die Konvertierung und um den Speicherplatz nicht kümmern. Wer seine Videos mit HTML5 selbst hochlädt, kann die Bildqualität selbst bestimmen. Allerdings benötigt Youtube Flash für die Darstellung seiner Videos.

Beispiele der HTML5-Tags: Alle drei hier vorgestellten HTML5-Beispiele lassen sich hier herunterladen, um sich das Abptippen zu sparen.

Der HTML5-Player Video.js: Der Player des Open-Source-Projekts Video.js arbeitet zusätzlich mit JavaScript. Damit sind neben einem anderen Design auch Zusatzfunktionen wie z.B. Untertitelungen möglich. Nachfolgend ein Beispiel:

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

 

 

 

 

 

 

Video.js lässt sich leicht in vorhandene Seiten einbinden. Der Quellcode kann von Video.js heruntergeladen werden. Nachfolgend ein einfaches lauffähiges Script einer Seite mit eingebundenen Video.js-Player für Übungszwecke:

<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”>
<title>Video abspielen mit Video.js</title>
<link href=”http://vjs.zencdn.net/4.11/video-js.css” rel=”stylesheet”>
<script src=”http://vjs.zencdn.net/4.11/video.js”></script>
</head>
<body>
<video class=”video-js vjs-default-skin” controls =”” data-setup=”{}”
height=”450″ id=”mv1″ poster=”http://www.janson-soft.de/regen.jpg” preload=”auto” width=”600″>
<source src=”http://www.janson-soft.de/regen.ogg” type=”video/ogg” />
<source src=”http://www.janson-soft.de/regen.mp4″ type=”video/mp4″ />
<p class=”vjs-no-js”>
To view this video please enable JavaScript, and consider upgrading
to a web browser that supports HTML5 video</a></p>
</video>
</body>
</html>

Der blaue Text muss nur in ein Textfile kopiert werden, dass wir mit der Endung html oder htm versehen.

Wer Video.js in Joomla einbinden möchte, muss einen etwas anderen Weg gehen und möge sich dazu mit mir direkt in  Verbinung setzen. Oder er schaut einfach in das Script dieser Seite heinein. Damit der Player auf vielen Browsern läuft, kommt es auf die Reihnfolge der eingebundenen CSS- und JSS-Dateien an.

Alternative Audio- und Video-Player ohne HTML5: Zum Abspielen benötigt der Browser Plug-ins, die nicht immer installiert sind. Fehlen dies Plug-ins, kann der Browser die Player nicht darstellen. Nachfolgend Beispiele mit dem Windows Mediaplayer und mit VLC.

Eingebetteter Mediaplayer als Alternative: Nachfolgend ein eingebetter Microsoft Mediaplayer:

Im Beispiel läuft wieder das schwedische Radioprogramm P1. Der Code kann hier heruntergeladen werden. Leider läuft er nicht auf allen Browsern. Bei Firefox muss das “Windows Media Player Plug-in Dynamic Link Library” aktiviert und installiert sein. Bei Chrome ist mit der rechten Maustaste auf das Feld zu klicken, um das Plug-in zuzulassen.

VLC-Plug-in von VideoLan: Noch exotischer ist das Plug-in von VLC. Nachfolgend ein Video-Beispiel:

Es setzt voraus, dass im Firefox das VLC-Plug-in installiert ist. In Chrome ist wieder mit der rechten Maustaste das Plug-in zuzulassen. Der lauffähige Beispiel-Code steht wieder hier zur Verfügung. Unter https://wiki.videolan.org/Documentation:WebPlugin/ ist eine genaue Beschreibung zur Programmierung enthalten. Die CPU-Auslastung ist mit dem VLC-Plug-in unter Firefox vergleichsweise gering. Meine CPU wurde im Vollbildmodus nur zu 20% ausgelastet, während mit HTML5 60% benötigt wurden. Mein Rechner ist allerdings schon 6 Jahre alt. Bei heutigen Rechnern dürfte die CPU-Auslastung erst recht kein Problem mehr darstellen. Das VLC-Plug-in ist meistens dann im Browser installiert, wenn das eigenständige VLC-Programm installiert wurde. Das VLC-Plug-in muss dann nur aktiviert werden.

Videos mit Photobucket präsentieren: Photobucket liefert einen kostenlosen Service zum Speichern von Fotos und Videos. Videos liegen nur im MP4-Format zum Download bereit. VLC hat sich zum Abspielen auch dieser MP4-Videos als geeignet erwiesen. Photobucket bietet auch einen eigenen Flash-Player an, den ich nach folgendend zu Testzwecken eingebettet habe:

Allerdings funktioniert dieser Flash-Player nicht auf allen Browsern. Mit Chrome funktioniert es bei mir, jedoch nicht auf meinem Firefox. Außerdem ist beim kostenlosen Account von Photobucket die monatliche Downloadmenge begrenzt.

MP3-Dateien bei Box.com speichern und abspielen: Bei Box.com können Dateien im begrenzten Umfang kostenlos abgelegt werden. MP3-Files können nicht direkt aufgerufen werden. Sie können jedoch über ein Iframe-Tag in der Webseite abgespielt werden. Siehe nachfolgendes Beispiel.

Leider ist es im Gegensatz zu früher unförmig gehalten und lässt sich nicht mehr schmaler gestalten. Zudem ist in der kostenlosen Version die monatliche Datenmenge, welche heruntergeladen kann, begrenzt. Dafür scheint die Methode bei den meisten Browsern zu funktionieren.

Fazit: HTML5 ist die erste Wahl beim Abspielen von Videos und Audio-Dateien, die auf einem eigenen Server untergebracht sind, da keine Plug-ins benötigt werden, mit denen die Browser nicht von Haus aus ausgestattet sind. Youtube ist die bequemste Lösung, da Youtube den Speicherplatz zur Verfügung stellt. Allerdings wird für das Abspielen von Youtube Flash benötigt, was aber in der Regel installiert ist.