Videos und Audio mit HTML5 in Webseiten abspielen Drucken E-Mail
Freitag, den 16. Januar 2015 um 10:42 Uhr

 

Videos und Audio mit HTML5 in Webseiten einbinden und abspielen - Weitere Alternativen

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.

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:


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.

Erfahrungen: Erfahrungen und sachdienliche Heinweise bitte unter http://afu.boards.net/post/2233/thread mitteilen. Eine Registrierung oder Anmeldung ist nicht notwendig für das Hinterlassen einer Mitteilung.

Zuletzt aktualisiert am Montag, den 16. März 2015 um 11:27 Uhr
 

3. Februar 2017

Meinen herzlichen Dank an alle Spender, die zum Weiterleben dieser Seite beitragen. Dieser Internetauftritt ist auf Spenden angewiesen, denn die Werbeeinnahmen reichen bei weitem nicht aus, um die laufenden Kosten zu decken. Diese Seite macht keinen Gewinn. Sie kostet nur Geld.

Die Artikel schreibe ich in meiner Freizeit. Dafür achte ich beim Verfassen der Artikel darauf, dass die Leser nicht zu unnötigen Anschaffungen verführt werden. Ich setze keine Artikel hinein, die von Firmen gesponsert werden.

Ich schreibe unabhängig für Dich als Leser. Ich hoffe mit meinen Seiten Anregungen zum Basteln und Reparieren geben zu können, die im besten Fall auch Geld sparen. Zum Beispiel lassen sich viele alte Geräte relativ leicht reparieren. Das macht nicht nur Spaß. Das kann viel Geld sparen. Trage dazu bei, dass diese Seite weiterlebt und spende einen kleinen Betrag! Danke!

Volker

___________________

___________________

Bitte unterstützen Sie die Weiterentwicklung und Pflege dieser Elektronik-Bastelseite mit einer kleinen Spende. Vielen Dank!

Volker

___________________

___________________

Bitte unterstützen Sie die Weiterentwicklung und Pflege dieser Elektronik-Bastelseite mit einer kleinen Spende. Vielen Dank!

Volker

___________________

© 2009-2017 Volker Lange-Janson