Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 Grundkurs

Audio und Video

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Bis dato benötigte man zur zuverlässigen Einbindung von Audio- und Videodaten ein Plug-in wie etwa Adobe Flash oder Microsoft Silverlight. Mit HTML5 entfällt diese Abhängigkeit, denn Browser können jetzt Multimediadaten eigenständig wiedergeben – wenn das Format stimmt.
11:07

Transkript

Eine der besten Quellen für zusätzliche Features für eine Webanwendung waren Plug-ins. Eins der größten Ereignisse für die Erstellung von Webanwendungen waren Plug-ins. Denn ein Browser kann von sich aus gar nicht so viel Dokumente anzeigen vielleicht noch ein bisschen JavaScript ausführen, Grafiken, ja, das war es. Aber ursprünglich waren Browser nicht für Programmierung gedacht, sondern nur für die Anzeige und Verlinkung von Inhalten. Plug-ins haben sich dann da in diesem Feld breit gemacht, ein voran Flash, von ursprünglich mal Komödie, dann später Adobe. Das Problem ist, diese Plug-ins muss man zum einen instalieren und zum anderen gibt es sie nicht für alle Systeme. Der bekannteste ist natürlich der Fall, dass unter iOS also dem mobilen Betriebsystem von Apple, es kein Flash-Player gibt, das heißt, Flash-Inhalte können nicht angezeigt werden. und deswegen gibt es auch seitens der Webbrowser-Entwicklung schon seit lange Bestrebungen für klassische Einsatzzwecke von Plug-ins eine Entsprechung in HTML zu intergrieren. Und der klassische Anwendungsfall für die Verwendung eines Plug-ins war die Darstellung von Multimedien halten, insbesondere Audio- und Video-Daten. Und dafür gibt es jetzt tatsächlich in HTML5 etwas Neues, was Plug-ins obsolet macht, aber vielleicht andere Probleme bittet. Wir werden sehen. Ich nehme die Datei mal video.html und diese Datei bekommt ein neues Element, und zwar heißt das video Übringens, es gibt auch ein Element, das heißt audio, und das funktioniert ähnlich, während audio für Audiodaten zuständig ist, ist video für Videodaten im Einsatz, aber ansonsten ähnliche Funktionalität. Ich fokusiere mich auf video. Das, sieht man einfach ein bisschen besser, liegt in der Natur der Sache. Also wir haben video als neues Element, und dieses video-Element ist dazu da, Video-Inhalte abzuspielen. Klingt, ja, zunächst relativ einfach. Wir haben wieder eine Reihe von Parametern. Wir können also beispielsweise die Breite und die Höhe von so einem Video angeben, und wir können natürlich auch angeben, welches Video abgespielt werden soll. das geht über src Eigenschaft. Jetzt brauche ich natürlich auch so eine Videodatei. Ich ziehe das mal rein in mein Projekt, wenn es später, woher so zu sagen diese Videos stammen, und ich nehme jetzt einfach eins dieser Videos und zwar dieses hier , kopiere den Namen kurz in Zwischenablage big_buck_bunny_480p_stereo und die Endung ist .ogg So, jetzt habe ich hier ein Video, gibt natürlich auch weitere Attribute, beispielsweise autoplay, also startet automatisch, oder auch controls, dann werden Steuerelemente angezeigt. Werfen wir mal einen Blick auf dieses Video, zum Beispiel, im Firefox-Browser. Also der wird gestartet, geht auf die Datei video.html. Yeah! Und jetzt erscheint hier das Video. Und wir sehen tatsächlich, etwas startet also auch automatisch, Und wir haben auch hier so Steuerungsleiste, die es beispielsweise uns ermöglicht, zu pausieren, die Lautstärker anzupassen etc. Das sieht hier schon mal ganz schön aus. Ich kopiere die URL kurz in Zwischenablage denn ich würde das gerne noch in einem anderen Browser testen, in dem Internet Explorer zum Beispiel, kopiere die URL wieder hier rein. Ungültige Quelle. Hmmmmm.. Das heißt also, das klappt jetzt nicht in jedem Browser, und wir haben hier eins der Hauptprobleme erkannt, wenn wir mit Videodaten arbeiten wollen und wenn auch mit Audiodateien arbeiten wollen und HTML5. Davor haben wir immer das Problem, das heißt sogenannten Plug-in-Höhle. Man hat dann ein Plug-in gebraucht, und das gab es eben nicht überall, und dann gab es verschiedene Versionen etc. Die Situation ist gelöst, jetzt gibt es eine neue sprichwörtliche Höhle, und zwar die Formatshöhle, denn nicht jeder Browser unterstützt jedes Format. Dazu schauen wir kurz mal auf die Quelle dieses Videos. Dass ein Video zur freien Verwendung ist, Sie können natülich ein Ereignis nehmen, sollten Sie natürlich auch, auf "Big Buck Bunny", so ein Demo Video, und dort gibt es Video in mehreren Formaten. Seite ist ein bisschen älter, aber Download steht immer wieder zur Verfügung. Und Sie sehen auch hier, es gibt mehrere Formate - MP4; H.264, das ist ein spezieller Codec, der kostenpflichtig ist, deswegen nicht von jedem Browser unterstützt wird, OGG ist ein freies Format, das kostet nichts, wird aber auch nicht von jedem Browser unterstützt, und und deswegen gibt es das Video in verschiedenen Formaten. Und das ist leider auch eine Auswirkung auf uns als Web-Entwickler. Wir müssen uns auch mit diesen verschiedenen Formaten anfreuden. Ihc habe hier noch caniuse offen, also die Websites, die uns unter anderem sagt, welche Browser unterstützen welches Feature. Es gibt hier den Punkt "Video element". Schauen wir uns an, sehen also, Internet Explorer, sonst immer das Sorgenkind ist schon ab Version 9 dabei, die anderen Browser durchaus länger. Und jetzt gibt es hier Unterpunkte, nämlich die verschiedenen Formate. Ich habe dieses OGG-Format erwähnt. Das war auch das, was wir ausprobiert haben - OGG/Theora. Und wie schaut es aus? Im Firefox und dem Chrome wird es unterstützt Wir haben das hier im Firefox auch nachvollzogen. Im Opera auch. Allerdings nur in diesen neuen Operaversionen, weil die jetzt, ja, die Chrome Rendering Engine nehmen, aber Internet Explorer,Safari, bei Microsoften, Apple sieht es also schlecht aus, Mobile so oder so. Nun gehen wir zurück zum Video element, schauen uns an, dass es noch Formate gibt. WebM ist zum Beispiel so ein Format. Das ist ein Format, das ursprünglich von Google kommt, deswegen unterstützt es der Chrome ganz prächtig. Der Firefox ist seit kurzem, wenn Sie das Video anschauen, zu meinem aktuellen Aufnahmezeitpunkt mit Einschränkungen, also Version 27 ist aktuell, Version 28 wird es unterstützen, Opera unterstützt es auch eben wegen Ähnlichkeit zum Chrome jetzt. Internet Explorer und Safari schauen weiterhin in die Röhre. Und das ist natürlich [] zu schauen, ja, also wenn die entsprechende Codex unterstützt und installiert sind, dann würden das auch andere Browser unterstützen, aber uns interessiert ja der Zustand zur Zeit für alle, ohne spezielle Zusatzinstallationen. Was bleibt noch? Das MPEG-4-Format mit dem H264 Codec Na, das sieht schon ein bisschen besser aus. Der Internet Explorer unterstützt es, der Safari unterstützt es, der Chrome unterstützt es, der Opera unterstützt es nicht, und beim Firefox hängt es ein bisschen davon ab, welche Betriebsystemversionen wir verwenden. Es gibt also freie Formate, die nicht alle können, und es gibt konstenpflichtige Formate, die vielleicht ein paar mehr Browser können, aber man weißt teilweise auch nicht, wie lange. Einige Browser-Entwickler haben auch gesagt, sie wollen beispielsweise H.264 irgenwann mal loswerden, weil es im Lizensegebühren kostet, weil Patente darauf sind. Ist also eine etwas knifflige Situation. Wir müssen bis dahin natürlich diese knifflige Situation auflösen. Wir müssen es also irgendwie erreichen, dass jeder Browser das Video-Format anzeigt, das es unterstützt. Und das machen wir so. Zunächst entfernen wir mal hier diese URL, denn es gibt noch ein Unterelement für Video, und zwar heißt das source. Und source ist ein Element, mit dem können wir ihm auch die URL des Videos angeben, zum Beispiel ich kopiere es in Zwischenablage als den Namen, .ogg- die OGG-Datei, und was wir noch eingeben könnten ist die zweite Datei, dann einen ähnlichen Namen, das ist die h264-Datei , hat die Endung mov. Und jetzt würde der Browser sozusagen, ja, beide Laden, aber, klar, ein Browser zeigt eine Videodatei an, also lädt er die erste. Was wir jetzt aber tun wollen, ist im Browser zu installieren, die Videodatei zu nehmen, die ihr unterstützt. Dazu können wir den Dateityp noch eingeben, denn den kennt der Browser nicht automatisch. Und der Dateityp für eine OGG-Datei ist video/ogg, ist so ähnlich, wie früher bei Script-Text mit type = text/javascripts oder bei Style-Text mit type = text/css. Ja, und die Datei ist dann von Typ video/mp4. Ein Browser, der also OGG kann, nimmt jetzt diese OGG-Datei, ein, der kein OGG kann, ignoriert diese Datei und springt dann weiter, indem zum Beispiel die mp4-Datei genommen wird. Wir können sogar umstellen, weil, ja, viele Browser mp4 unterstützen, und viele auf dieses Format schwören, das heißt, ein Browser, der beides kann, nimmt sich immer das erste, was passt, und genau das wollen wir jetzt ausprobieren. Doch leider werden wir wieder enttäuscht werden. Wir starten den Internet Explorer, laden video.html. Ungültige Quelle! Was ist das Problem? Der Internet Explorer versucht, sehr, sehr schlau zu sein, und schaut sich auch an, was der Webserver behauptet, dass es für einen Dateityp ist. Der Webserver wiederum orentiert sich so ein bisschen an der Konfiguration und an den auf dem System eingerichteten Mime-Typen. Wir haben jetzt die Endung .mov, und das ist ja auch etwas, so es Apple QuickTime verwendet. Deswegen sagt jetzt der Server dem Browser, es könnte auch ein QuickTime-Film sein. Der Internet Explorer glaubt das auch noch. Wir können uns aber hier leicht behelfen. Hier mal Sie würden jetzt die Server-Konfiguration anpassen, aber das Einfachste ist, benennen die Datei um. Sieht man jetzt hinten nicht direkt, deswegen mache ich im Blindflug. Und ich gebe jetzt die Endung mp4, siehe es, wenn ich mit der Maus drüber fahre, heißt es .mp4. Ich ändere das auch in .mp4. Speichern. Gehen wir noch mal zum Internet Explorer video.html, und jetzt in der Tat andere Größe, und der Film wird tatsächlich abgespielt. Machen wir wieder den Gegentest, die Gegenprobe! Nehmen wir den Firefox! Im Firefox wieder video.html und auch der Firefox zeigt entsprechend das Video an. Ist also eine jetzt nicht komplett zufriedenstellende Situation. Das muss man ganz deutlich sagen, aber dennoch können wir jetzt ohne die Unterstützung von irgendwelchen Plug-ins Videodaten anzeigen. Je nachdem, was für Browser unterstützt werden, muss man noch zusätzliche Arbeit leisten, beispielsweise mobile Browser, so hat man auch mobile Nutzer, hat man vielleicht noch irgendeine Variante in einem kleinen niedrig auflösenden Format, das man dann ebenfalls intergrieren sollte. Muss man noch ältere Browser unterstützen, dann braucht man auch Vollback, beispielsweise, mit einer flash-basierten Lösungen gibt da die Verse Medienplayer die versuchen all das auf einmal zu erledigen. Ein Übersicht ist hier schwierig zu geben, weil ja immer wieder neue Projekte aufpoppen, andere dafür wieder eingestampft werden. Aber vom Prinzip her hängt es hier ganz stark davon ab, was für Besuche man hat, was für Browser wir haben, und dies bezüglich muss man sich dann eine Strategie zurechtlegen für die Intergration von Audio- und Videodaten. Eine JavaScript API gibt es auch noch, hat also komplette Steuerungsmöchlichkeiten, Statusinformationen, ist also wirklich das, wofür früher Plug-ins einmal da waren.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!