Multimedia: Eine Testseite für Ihren Browser
HTML5 und Video
Audio, Flash-Video und Video in HTML 5 integrieren
Auf dieser Seite können Sie überprüfen, welche gängigen Medienformate ihre Browser anzeigen/abspielen können.
Videos sind teilweise ohne Ton! Ihre Hardware oder Ihr Browser sind also nicht verstellt, bzw. defekt, wenn Sie nicht immer etwas hören.
Zur Audioüberprüfung scrollen Sie bitte zur unteren Hälfte der Seite.
Überprüft werden können die Container und Codecs: MP4, Ogv, WebM, FLV, MP3 und Ogg (Video und Audio)
Qualität der Videos wurde aus Platzgründen dramatisch reduziert!
Wichtiger Hinweis: Es gilt der im Disclaimer angegebene Haftungsausschluss. Der Inhalt von Webseiten kann sich über Nacht verändern. Es gilt: Keinerlei Gewähr für fremde Webseiten! Verlassen Sie die fremde Webseite sofort wenn sie nicht den erwarteten Inhalt hat, achten Sie bitte auf die Warnungen Ihres modernen Browsers und Ihrer aktuellen Antivirensoftware. Bitte informieren Sie bei verdächtigen Seiten auch den Seitenbetreiber über "Kontakt" in der Fußzeile jeder Seite. Keinerlei Gewähr für die Richigkeit der Angaben. Keine Haftung für eventuelle Schäden durch die Befolgung der Beispiele.
Ihr Browser:
Das Format MP4
Video: Public Domain - Video ohne Sound
Quelle: http://www.open-video.org/details.php?videoid=4756
Dieses Video sollte angezeigt werden in (¹): IE 9 - IE 10 - Safari - Chrome
Andere zeigen "Ihr Browser kann dieses Videoformat nicht darstellen!", nur das voreingestellte Titelbild (poster), oder einen browserinternen Hinweis.
0763.mp4
<div title="Video: H.264/MPEG4">
<video class="vid1" control poster="pfad/videobild.jpg" preload="metadata">
<source src="/pfad-zum-video/0763.mp4" type="video/mp4" />
Ihr Browser kann dieses Videoformat nicht darstellen!
</video>
<div>
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -nein- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -nein- Mozilla Firefox 23.0.1: -nein- Safari 5.1.7: -nein- Opera 15.0.1147.153: -nein-
Das Format Ogg
Video: Public Domain - Video ohne Sound
Quelle: http://www.open-video.org/details.php?videoid=4756
Dieses Video sollte angezeigt werden in (¹): Firefox - Chrome - Chromium
Andere zeigen "Ihr Browser kann dieses Videoformat nicht darstellen!", nur das voreingestellte Titelbild (poster), oder einen browserinternen Hinweis.
0763.ogv
<div title="Video: Ogg">
<video class="vid1" control poster="pfad/videobild.jpg" preload="metadata">
<source src="/pfad-zum-video/0763.ogv" type="video/ogg" />
Ihr Browser kann dieses Videoformat nicht darstellen!
</video>
<div>
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -nein- Mozilla Firefox 23.0.1: -ja- Safari 5.1.7: -nein- Opera 15.0.1147.153: -ja-
Das Format WebM
Video: Public Domain - Video ohne Sound
Quelle: http://www.open-video.org/details.php?videoid=4756
Dieses Video sollte angezeigt werden in (¹): Mozilla, Chrome, Opera, IE 9 (mit nachinstalliertem VP8-Codec)
Andere zeigen "Ihr Browser kann dieses Videoformat nicht darstellen!", nur das voreingestellte Titelbild (poster), oder einen browserinternen Hinweis.
0763.webm
<div title="Video: WebM">
<video class="vid1" control poster="pfad/videobild.jpg" preload="metadata">
<source src="/pfad-zum-video/0763.webm" type="video/webm" />
Ihr Browser kann dieses Videoformat nicht darstellen!
</video>
<div>
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -nein- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -nein- Mozilla Firefox 23.0.1: -nein- Safari 5.1.7: -nein- Opera 15.0.1147.153: -ja-
Die Formate MP4 + Ogg + WebM
Video: Public Domain - Video ohne Sound
Quelle: http://www.open-video.org/details.php?videoid=4643
Dieses Video sollte angezeigt werden in (¹): Allen HTML 5 fähigen Browsern
Andere zeigen "Ihr Browser kann dieses Videoformat nicht darstellen!", nur das voreingestellte Titelbild (poster), oder einen browserinternen Hinweis.
4022.mp4 oder 4022.ogv oder 4022.webm
<div title="Video: H.264/MPEG4/Ogg/WebM">
<video class="vid1" control poster="pfad/videobild.jpg" preload="metadata">
<source src="/pfad-zum-video/4022.mp4" type="video/mp4" />
<source src="/pfad-zum-video/4022.ogv" type="video/ogg" />
<source src="/pfad-zum-video/4022.webm" type="video/webm" />
Ihr Browser kann dieses Videoformat nicht darstellen!
</video>
<div>
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -nein- Mozilla Firefox 23.0.1: -ja- Safari 5.1.7: -nein- Opera 15.0.1147.153: -ja-
Das Format Flash Video
Videos: Public Domain - Beide Videos ohne Sound
Quellen siehe oben
Diese Videos sollten angezeigt werden in: Allen Browsern mit integriertem Flashplayer
0763.flv
4022.flv
<div title="Video: Flash">
<object id="f4Player" class="vid2" type="application/x-shockwave-flash" data="/pfad-zum-player/player.swf?v1.3.5">
<param name="movie" value="/pfad-zum-player/player.swf?v1.3.5" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="scale" value="noscale" />
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="swlivevonnect" value="true" />
<param name="cachebusting" value="false">
<param name="flashvars" value="skin=/pfad-zum-skin/mySkin.swf&video=/pfad-zum-video/0763.flv"/>
<a href="http://www.adobe.com/go/flashplayer/">Download it from Adobe.</a>
<a href="http://gokercebeci.com/dev/f4player" title="flv player">flv player</a>
</object>
<div>
benötigt:
http://gokercebeci.com/dev/f4player Nicht mehr verfügbar!
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -nein-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -ja- Mozilla Firefox 23.0.1: -nein- Safari 5.1.7: -ja- Opera 15.0.1147.153: -nein-
Die Formate MP4 + Ogg + WebM + Flash Video
Video: Public Domain - Video mit Sound
Quelle: www.open-video.org/details.php?videoid=778
Dieses Video sollte angezeigt werden in (¹): Allen mediafähigen Browsern
Nicht HTML5-fähige Browser zeigen das Video mit integriertem Flashplayer
UGS06_001.mp4 oder UGS06_001.ogv oder UGS06_001.webm oder UGS06_001.flv
<div title="Video: H.264/MPEG4/Ogg/WebM/Flash">
<video class="vid2" control poster="pfad/videobild.jpg" preload="metadata">
<source src="/pfad-zum-video/UGS06_001.mp4" type="video/mp4" />
<source src="/pfad-zum-video/UGS06_001.ogv" type="video/ogg" />
<source src="/pfad-zum-video/UGS06_001.webm" type="video/webm" />
<object id="f4Player" class="vid2" type="application/x-shockwave-flash" data="/pfad-zum-player/player.swf?v1.3.5">
<param name="movie" value="/pfad-zum-player/player.swf?v1.3.5" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="scale" value="noscale" />
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="swlivevonnect" value="true" />
<param name="cachebusting" value="false">
<param name="flashvars" value="skin=/pfad-zum-skin/mySkin.swf&video=/pfad-zum-video/UGS06_001.flv"/>
<a href="http://www.adobe.com/go/flashplayer/">Download it from Adobe.</a>
<a href="http://gokercebeci.com/dev/f4player" title="flv player">flv player</a>
</object>
</video>
<div>
Verwendet in Browsern, welche kein HTML5 beherrschen, den Open Source "flv player" um das Video im Flash-Format anzuzeigen.
http://gokercebeci.com/dev/f4player Nicht mehr verfügbar!
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -ja- Mozilla Firefox 23.0.1: -ja- Safari 5.1.7: -ja- Opera 15.0.1147.153: -ja-
HTML5 und Audio
Das Format MP3
Audio: Public Domain - Extrahierter Sound der Videodatei:
http://www.open-video.org/details.php?videoid=778
UGS06_001-audio.mp3
<div title="Audio: MP3">
<audio controls>
<source src="/pfad-zum-audio/UGS06_001-audio.mp3" type="audio/mpeg" />
Ihr Browser kann dieses Audioformat nicht abspielen!
</audio>
<div>
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -nein- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -nein- Mozilla Firefox 23.0.1: -nein- Safari 5.1.7: -nein- Opera 15.0.1147.153: -nein-
Das Format Ogg
Audio: Public Domain - Extrahierter Sound der Videodatei:
http://www.open-video.org/details.php?videoid=778
UGS06_001-audio.ogg
<div title="Audio: Ogg>
<audio" controls>
<source src="/pfad-zum-audio/UGS06_001-audio.ogg" type="audio/ogg" />
Ihr Browser kann dieses Audioformat nicht abspielen!
</audio>
<div>
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -nein- Mozilla Firefox 23.0.1: -ja- Safari 5.1.7: -nein- Opera 15.0.1147.153: -ja-
Die Formate Ogg + MP3
Audio: Public Domain - Extrahierter Sound der Videodatei:
http://www.open-video.org/details.php?videoid=778
UGS06_001-audio2.ogg oder UGS06_001-audio2.mp3
<div title="Audio: Ogg/MP3">
<audio controls>
<source src="/pfad-zum-audio/UGS06_001-audio2.ogg" type="audio/ogg" />
<source src="/pfad-zum-audio/UGS06_001-audio2.mp3" type="audio/mpeg" />
Ihr Browser kann dieses Audioformat nicht abspielen!
</audio>
<div>
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -nein- Mozilla Firefox 23.0.1: -ja- Safari 5.1.7: -nein- Opera 15.0.1147.153: -ja-
Das Format Flash (Audio)
Audio: Public Domain - Extrahierter Sound der Videodatei:
http://www.open-video.org/details.php?videoid=778
UGS06_001-audio3.flv
<object id="f4Player" class="aud1" type="application/x-shockwave-flash" data="/pfad-zum-player/player.swf?v1.3.5">
<param name="movie" value="/pfad-zum-player/player.swf?v1.3.5" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="scale" value="noscale" />
<param name="allowfullscreen" value="false">
<param name="allowscriptaccess" value="always">
<param name="swlivevonnect" value="true" />
<param name="cachebusting" value="false">
<param name="flashvars" value="skin=/pfad-zum-skin/mySkin.swf&video=/pfad-zum-audio/UGS06_001-audio3.flv"/>
<a href="http://www.adobe.com/go/flashplayer/">Flashplayer benötigt - Download it from Adobe.</a>.
</object>
Konvertierung unter Linux: Mit einem Terminal in das Verzeichis wechseln; - Befehl:
avconv -i UGS06_001-audio3.mp3 -aq 5 UGS06_001-audio3.flv
benötigt:
http://gokercebeci.com/dev/f4player Nicht mehr verfügbar!
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -nein-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -ja- Mozilla Firefox 23.0.1: -nein- Safari 5.1.7: -ja- Opera 15.0.1147.153: -nein-
Die Formate Ogg + MP3 + Flash
Audio: Public Domain - Extrahierter Sound der Videodatei:
http://www.open-video.org/details.php?videoid=778
UGS06_001-audio3.ogg + UGS06_001-audio3.mp3 + UGS06_001-audio3.flv
<div title="Audio: Ogg/MP3">
<audio controls>
<source src="/pfad-zum-audio/UGS06_001-audio2.ogg" type="audio/ogg" />
<source src="/pfad-zum-audio/UGS06_001-audio2.mp3" type="audio/mpeg" />
<object id="f4Player" class="aud1" type="application/x-shockwave-flash" data="/pfad-zum-player/player.swf?v1.3.5">
<param name="movie" value="/pfad-zum-player/player.swf?v1.3.5" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="scale" value="noscale" />
<param name="allowfullscreen" value="false">
<param name="allowscriptaccess" value="always">
<param name="swlivevonnect" value="true" />
<param name="cachebusting" value="false">
<param name="flashvars" value="skin=/pfad-zum-skin/mySkin.swf&video=/pfad-zum-audio/UGS06_001-audio3.flv"/>
<a href="http://www.adobe.com/go/flashplayer/">Download it from Adobe.</a>
<a href="http://gokercebeci.com/dev/f4player" title="flv player">flv player</a>
</object>
</audio>
<div>
Verwendet in Browsern, welche kein HTML5 beherrschen, den Open Source "flv player" um das Video im Flash-Format anzuzeigen.
http://gokercebeci.com/dev/f4player Nicht mehr verfügbar!
Konvertierung unter Linux
Mit einem Terminal in das Verzeichis wechseln, - Befehl:
avconv -i UGS06_001-audio3.mp3 -aq 5 UGS06_001-audio3.flv
Prüfergebnis auf zwei verschiedenen Maschinen: - Wird angezeigt in
**Debian 7.01 Linux CPU: AMD Sempron(tm) Processor 2800+**
Chromium 28.0.1500.95: -ja- Iceweasel 22.0: -ja- Konqueror 4.8.4: -ja- Midori 0.4.3: -ja- Webbrowser/(WebKit 1.8.1): -ja-
**Windows XP CPU: Intel Celeron 2800**
Chrome 28.0.1500.95 m: -ja- IE 8: -ja- Mozilla Firefox 23.0.1: -ja- Safari 5.1.7: -ja- Opera 15.0.1147.153: -ja-
Schöne neue Welt ohne Flash?
"Im Gegenteil, Html 5 mit nativen Videos? Besser nicht!" Könnte sich zunächst sich ein Webseitenautor sagen, welcher die mobilen Geräte außer Acht lässt. Denn, HTML 5 ist definitiv eine Zumutung für einen Seitenbetreiber. Es gilt, auf dem begrenztem Webspace die Videos gleich mindestens zweimal (mit webm dreimal) in verschiedenen Codec's zur Verfügung zu stellen, damit die verschiedenen Browser das Video auch abspielen. HTML 5 scheint das Chaos der unterschiedlichen Darstellung, das unter verschiedenen Browsern herrscht, eher noch zu vergrößern, als die Sache zu vereinfachen. Man sehe sich dazu nur die Ergebnisse meiner Überprüfungen an!
Anders sieht es aus, wenn man berücksichtigt, dass heutzutage mehr und mehr Webseiten-Besucher mit mobilen Geräten kommen. Viele dieser Geräte sind aber, zumindest nativ, nicht mit einem Flashplayer bestückt. Um aber nicht-HTML5-fähige Browser nicht links liegen zu lassen, muß das Video trotzdem noch zusätzlich als Flash-Container vorliegen. Um ganz sicher zu gehen, sollte man auch das WebM Format vorliegen haben, ein zehnminütiges und etwa 100 Megabyte großes Video plustert sich so zu 400 Megabyte im Webspace auf! Zum Abspielen der flv ist außerdem noch eine entsprechende SWF-Datei (Flash-Player) nötig.
Ich bin von dem auf dieser Seite verwendeten "flv player" (Link siehe oben) recht angetan, klein, schön und einfach zu konfigurieren. Was das poster=xyz.jpg im object-tag in HTML5 ist, nämlich ein Startbild für das Video anzuzeigen, übernimmt beim "flv player" der parameter thumbnail=xyz.jpg. Das Programm ist Open Source und steht unter GPL License!
Videokonvertierung
Der komplizierteste Teil des Themas «Videos und HTML 5» ist sicherlich das Konvertieren in die verschiedenen Formate. Sowohl unter Linux als auch unter (http://gokercebeci.com/dev/f4player Nicht mehr verfügbar!) Windows stehen eine Menge Kommandozeilen- und GUI-Programme zur Verfügung. Plattformübergreifend funktioniert die Konvertierung beispielsweise mit dem Video Lan Player (VLC). Hat man sich allerdings mit der Materie noch nicht tiefer beschäftigt, steht man aber bei manchen Programmen vor der schwierigen Wahl, welche Codecs und welche Qualität für einen bestimmten Container die Richtigen sind. Dann hilft nur die entsprechenden Beschreibungen der Wikipedia lesen - und: Testen - testen - testen!
Links
HTML5 Video Tag
audio - HTML5 Darstellung Elemente & Attribute