Über die Zukunft von Multimedia in interaktiven Anwendungen.

1. HTML5 versus Flash
Über die Zukunft von Multimedia in interaktiven
Anwendungen
07. Dezember 2011
Monika Steinberg
Quelle: http://vimeo.com/11551721
M. Steinberg HTML5 versus Flash 07.12.2011 1

2. Ablauf
 Einleitung
 Multimedia im Web
 Warum Flash versus HTML5?
 Beispiele: Flash oder HTML5?
 Was ist Adobe Flash?
 Multimedia in Flash
 Was ist HTML5?
 Multimedia in HTML5
 HTML5 und Adobe Flash im Vergleich
 Audio und Video in HTML5
 Zusammenfassung und Ausblick
M. Steinberg HTML5 versus Flash 07.12.2011 2

3. Einleitung
M. Steinberg HTML5 versus Flash 07.12.2011 3

4. Einleitung: Multimedia im Web
 Immer mehr interaktive Anwendungen im Web:
 Online-Communities, Spiele, Groupware, Wikis, Blogs, …
 Jede zweite Webapplikation enthält Audio- und Video-Inhalte:
 YouTube, Last.fm, Vimeo, MyVideo, Soundcloud, Mixcloud, ... drehen
sich auschließlich um Multimedia.
 Außer über Adobes Flash-Technologie (Flashplayer-Plugin im
Browser) bisher keine brauchbare Möglichkeit, Ton und Film
als native Objekte (ohne Plugin) in HTML einzubetten.
 HTML5 greift aktuell Problem mit neuen Media-Elementen auf:
 erstmals möglich, Bewegtbild und Ton ohne Plugins von
Drittanbietern zuverlässig in Webseiten einzubetten.
M. Steinberg HTML5 versus Flash 07.12.2011 4

5. Einleitung: Warum Flash versus HTML5?
 Adobe Flash als kommerzielle, geschlossene Technologie
schon lange kritisiert.
 Interessante Entscheidung im November 2011:
 Adobe entwickelt kommerzielles Flashplayer-Plugin für mobile Geräte
nicht weiter.
 Gerade mobiler Markt boomt.
 Adobe setzt auf HTML5 für mobile Endgeräte.
 Langanhaltender Glaubenskrieg zwischen Apple und Adobe
bald zu Ende?
 Vision „freies Internet“ verträgt eigentlich keine proprietären
Standards
 aber Adobe Flash in vergangenen Jahren in vielen Anwendungsfällen
als Quasi-Standard etabliert.
M. Steinberg HTML5 versus Flash 07.12.2011 5

6. Wer von Ihnen hat schon
mit Flash gearbeitet?
M. Steinberg HTML5 versus Flash 07.12.2011 6

7. Und wer mit HTML5?
M. Steinberg HTML5 versus Flash 07.12.2011 7

8. Flash oder HTML?
M. Steinberg HTML5 versus Flash 07.12.2011 8

9. Beispiele: HTML5 oder Flash?
 Beispiel 1:
 9elements
 Beispiel 2:
 Is your data safe?
M. Steinberg HTML5 versus Flash 07.12.2011 9

10. Einleitung: Neue Möglichkeiten von HTML5
 Neue Möglichkeiten von HTML5 stellen Flash erneut auf die
Probe.
 Wird Adobes Eigenentwicklung künftig noch gebraucht?
 Auseinandersetzung zwischen Apple und Adobe um Flash auf iPhone
OS hat Thema wieder hochgebracht.
 Aktuell sogar Occupy Flash und Occupy HTML Bewegung.
 Beeinflusst Entwicklung,
Werkzeuge und Techniken in
interaktiven Anwendungen
und bei Erstellung von
Multimediainhalten im
Informationsmanagement enorm.
 Browser als
Anwendungsplattform
 nicht mehr nur für statische
Webseiten.
 HTML5 hieß vorher Web
Applications 1.0.
 Viele neue Elemente für
komplexere Webseiten.
M. Steinberg HTML5 versus Flash 07.12.2011 10

11. Was ist Adobe Flash?
M. Steinberg HTML5 versus Flash 07.12.2011 11

12. Was ist Adobe Flash?
 Kommerzielle Plattform zur Programmierung und Darstellung
multimedialer, interaktiver und animierter Inhalte
 Video, Audio, Vektorgrafiken, Rastergrafiken, 3D mit hohem
Interaktivitätsgrad.
 Bidirektionales Streaming von Audio- und Videoinhalten.
 Verarbeitung von Nutzereingaben über
Maus, Tastatur, Mikrofon und Kamera.
 Objektorientierter Skriptsprache
ActionScript 3.0.
 Darstellung von 3D-Inhalten über
Stage3D-API.
 Proprietäres, kostenlos verfügbares
Abspielprogramm Adobe Flash Player
(Browser-Plugin) erforderlich.
 Offene Web-Standards (HTML5, AJAX,
CSS3) sowie Microsoft Silverlight,
OpenLaszlo, JavaFX von Oracle
konkurrieren mit Flash.
M. Steinberg HTML5 versus Flash 07.12.2011 12

13. Flash und Multimedia
 Veröffentlichungsformat SWF mit dynamisch erzeugten
Vektorgrafiken, Animationen und Sounds.
 Hohe Komprimierung, geringe Dateigröße.
 Alle gängigen Dateiformate integrierbar:
 Bildformate wie JPG oder PNG.
 Videoformate wie MOV, AVI oder MPEG.
 Audioformate wie WAV oder MP3.
 Verbreiteter Einsatz als Basis für Media-Player im Internet
durch Flash-Video-Format FLV
 Z.B. bei YouTube (Wechsel zu WebM in Arbeit).
 Qualitativ hochwertige Übertragung von Videos.
 Übertragung in High Definition durch H.264-Standard.
M. Steinberg HTML5 versus Flash 07.12.2011 13

14. Was ist HTML5?
M. Steinberg HTML5 versus Flash 07.12.2011 14

15. Was ist HTML5?
 Textbasierte Auszeichnungssprache
 Hyper-Text-Markup-Language für Strukturierung von Dokumenten.
 Semantische Auszeichnung von Texten, Bildern und Hyperlinks.
 Von W3C (World Wide Web Consortium, z.B. Tim Berners-Lee) und
WHATWG (Web Hypertext Application Technology Working Group, AG
großer Browserhersteller Apple, Mozilla, Opera und Google) entwickelt.
 Nachfolger von HTML4
 Zur Zeit noch in Entwicklung.
 Ausgereifte Entwürfe zweier Entwicklerteams liegen vor.
 Noch keine fertige Empfehlung des W3C (draft).
 Ersetzt Dokumentbeschreibungsstandards HTML 4.01, XHTML 1.0
und DOM HTML Level 2.
 Neue Funktionalitäten insbesondere für Video, Audio und dynamische
2D-/3D-Grafiken
 von HTML4 vorher nicht direkt unterstützt.
M. Steinberg HTML5 versus Flash 07.12.2011 15

16. Web
Graphics
Library
Web Accessibility Initiative –
Accessible Rich
Internet Applications
Scalable
Vector
Graphics
JavaScript
Optimierung –
Threads für
JavaScript
M. Steinberg HTML5 versus Flash 07.12.2011 16

17. Multimedia in HTML5
 JavaScript-Bibliotheken wie Media-API für Audio und Video, jQuery
für Effekte, Drag-And-Drop, Offline-Storage, File-API, Geolocation-API
 Viele Neuerungen über JavaScript, nicht über HTML.
 Eine der größten Attraktionen in HTML5
 Canvas-Element (Leinwand) als dynamische 2D-Zeichenfläche.
 Fläche, auf der mittels JavaScript gezeichnet wird:
 Canvas allein macht nichts.
 Weite, aber nicht 100%tige Unterstützung aller Browser.
 Animationen, Diagramme, eigene Interface-Elemente, Videos manipulieren.
 WebGL für 3D
 Web Graphics Library
 Nicht direkt HTML5 sondern andere Spezifikation.
 Bestandteil von Webbrowsern für hardwarebeschleunigte 3D-Grafiken direkt
im Browser – ohne zusätzliche Erweiterungen.
 3D-Programmierschnittstelle auf Basis von OpenGL mit JavaScript.
M. Steinberg HTML5 versus Flash 07.12.2011 17

18. Neues in HTML5
 Neue Funktionalitäten für Bild, Audio und Video:
 Native Videounterstützung,
 native Audiounterstützung,
 lokaler Speicher,
 dynamische 2D- und 3D-Grafiken.
 Video-Erweiterung von HTML5 als offener, frei
zugänglicher Standard
 konkurriert mit Adobe Flash beim Abspielen von Videos.
 Zusätzlich neue semantische HTML-Elemente, Formular
Widgets, DOM Erweiterung, Dateiverarbeitung, u.v.m.
 Offline-Webanwendungen möglich.
M. Steinberg HTML5 versus Flash 07.12.2011 18

19. Welche Vor-/Nachteile
sehen Sie bei Flash
gegenüber HTML5?
M. Steinberg HTML5 versus Flash 07.12.2011 19

20. HTML5 und Flash
im Vergleich
M. Steinberg HTML5 versus Flash 07.12.2011 20

21. Vorteile von Flash
 Über Plugin keine Probleme mit Browserkompatibilität.
 Effektivere Cross-Browser-Entwicklung.
 Einfaches Einbetten von Multimedia-Content wie Animationen, Audio,
Video.
 Stabile Plattform mit weit verbreitetem Plugin.
 Ausgereifte Werkzeuge und Entwicklungsumgebungen
 Z.B. Adobe Flex oder Air.
 ActionScript inzwischen deutlich mächtiger als JavaScript
 Entwicklerhilfen wie z.B. Code Completion, Refactoring.
 3D-Unterstützung ausgereift und weiter auf Vormarsch
 Stage3D-API (Molehill) mit 3D-Hardwareunterstützung.
 Über DirectX (Windows) oder OpenGL (Linux) bzw. softwarebeschleunigt.
 Auslesen und Ansteuern von Ausgabegeräten in Echtzeit, Multi-
Touch-Anwendungen, Motion-Steuerung und komplexe Interfaces
möglich.
 Schnelle Weiterentwicklung durch kommerziellen Hintergrund.
M. Steinberg HTML5 versus Flash 07.12.2011 21

22. Nachteile von Flash
 Proprietäres, geschlossenes Format:
 Adobes kommerzielle Eigenentwicklung.
 Plugininstallation in Form von Flashplayer nötig.
 Mangelnde Performance für Nicht-Windows-Nutzer.
 Sicherheitslücken über Plugin.
 Kein Flashplayer für iPhone/iPad.
 Auffindbarkeit von Informationen problematisch über
kompiliertes swf-Format:
 Suchmaschinenunfreundlich, Problem der Indexierung.
 Stage3D-API in Konkurrenz mit offenem Standard WebGL.
M. Steinberg HTML5 versus Flash 07.12.2011 22

23. Vorteile von HTML5
 Keine Plugins mehr notwendig für Multimedia.
 Offener Standard wird über W3C und WHATWG weiter
entwickelt.
 Vorantreiben des Übergangs zu wohlgeformten Dokumenten.
 Integration semantischer Standards.
 In meisten Browsern bereits (wenn auch unvollständig)
implementiert.
 Suchmaschinenfreundlich über Metadaten – auch bald für
semantische Suche.
 In Zukunft universal auf allen Endgeräten und mit Inhalt in
allen Weltsprachen verwendbar.
M. Steinberg HTML5 versus Flash 07.12.2011 23

24. Nachteile von HTML5
 Nicht alle HTML5-Funktionalitäten in allen Browsern verfügbar
 Noch keine fertige Empfehlung des W3C - geplant für 2014 bzw. 2022.
 Anhaltende Cross-Browser-Problematik auch mit CSS3
 Erhöhter Aufwand über mehrere Versionen und Browserweichen.
 HTML5-Spektrum mit JavaScript-APIs sehr komplex.
 Zwei Entwicklerteams mit W3C und WHATWG.
 Kein Standard für Audio/Video-Codecs – wie eigentlich geplant.
 Auch proprietäre Techniken wie Canvas enthalten:
 Erst Teil von Mac OS und Safari, Mangel an Zugänglichkeit über
Screenreader.
 JavaScript-Sicherheitslücken über Cross-Site-Scripting.
 Noch keine ausgereiften und stabilen Entwicklungsumgebungen
verfügbar (z.B. Adobe Edge neu).
 JavaScript bietet noch keine ausgereifte 3D-Technologie (evt. mit
ECMA-Scipt 5.0).
M. Steinberg HTML5 versus Flash 07.12.2011 24

25. Audio und Video
in HTML5
M. Steinberg HTML5 versus Flash 07.12.2011 25

26. Audio-Video-Funktionalitäten: Flash
 Flashplayer-Plugin
 fasst problemlos alle gängigen Video- und Audioformate
zusammen und spielt sie ab.
 Video nicht mit vollem Hardwarezugriff abspielbar.
 Performance-Einbußen.
 2D-Vektorgrafiken, 2D/3D-Animationen und Interaktion:
 Grafische Werkzeuge und All-In-One-Entwicklungsumgebung.
 Umfangreiche und komfortable Zeichenwerkzeuge:
 Insbesondere mit Grafik-Tablett für Freihand-Animationen oder
Cartoons.
 Visuelle, zeitleistenbasierte Anordnung von Bewegtbild und Audio.
 Objektorientiere Programmiersprache ActionScript 3.0 sehr
mächtig inzwischen.
 Eigene 3D-API Stage3D (Molehill) mit 3D-Hardwareunterstützung.
M. Steinberg HTML5 versus Flash 07.12.2011 26

27. Audio-Video-Funktionalitäten: HTML5
 HTML5 (ohne Plugin und zusätzliche Codecs)
 Audio- und Video-Inhalte direkt aus Dokument referenzierbar:
 Im Browser verfügbar und direkt manipulierbar über JavaScript.
 Oberfläche mit CSS einfach anpassbar - Flash-Videoplayer-Anpassungen
oft schwierig.
 Standardisierung von Audio/Video-Codecs nicht so schnell
zu erwarten:
 Theora Video und Vorbis Audio in Ogg Containern (offene Standards)
geplant, aber wieder verworfen.
 Dynamische 2D/3D-Grafiken und Animationen über
JavaScript, WebGL und Canvas-Element:
 Oft erhöhter Programmieraufwand und viele verschiedene APIs.
 3D: Nicht ausreichende Funktionalitäten und teils schlechte
Performance.
 Cross-Browser-Unterstützung noch unkomplett.
M. Steinberg HTML5 versus Flash 07.12.2011 27

28. Neue HTML5 Elemente: <audio> und <video>
 Direktes Einbinden und Abspielen von Audio- und Videodateien
in reinem HTML.
 Audio- und Videosteuerung über JavaScript Media-API.
 Audio- und Video-Elemente als native Browserobjekte
 ohne externes Plugin oder zusätzlichen Codec.
 Dateiauswahl nach Media-Typ für Video und Audio:
 Verschiedene Dateitypen und Codecs bereitstellen.
 Mehraufwand über Konvertierung in verschiedene Formate bei Video
und Audio (Werkzeuge verfügbar, z.B. Miro Video Converter).
 Browser überprüft eigenständig, was abspielbar ist.
 Z.B. Mp4, WebM, Ogg, mp3, wav.
M. Steinberg HTML5 versus Flash 07.12.2011 28

29. Multimedia-Dateiformate im Browser
 Codec-Problematik aus Browser-Giganten-Streit hier zu
erkennen:
 Offenes OGG-Containerformat wenig unterstützt.
 Noch nicht rundum zufriedenstellend.
 Gewisser Mindestumfang unterstützt.
Codec Firefox Safari Chrome Opera IE 9 IE 6-8
3.5+ 4+ 3+ 10.50+
Theora/ orbis (OGG)
V j
a nein j
a j
a nein nein
H.264/ A (MPEG-4)
AC nein j
a j
a nein j
a nein
MP3 nein j
a j
a nein j
a nein
WAV j
a j
a j
a j
a nein nein
WebM j (v.4)
a nein j
a j
a nein nein
Angaben basieren auf: HTML5, Peter Kröner, 2011.
M. Steinberg HTML5 versus Flash 07.12.2011 29

30. Beispiele HTML5-Elemente: <audio>
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
M. Steinberg HTML5 versus Flash 07.12.2011 30

31. Beispiele HTML5-Elemente: <video>
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support
the video tag.
</video>
</body>
</html>
M. Steinberg HTML5 versus Flash 07.12.2011 31

32. Beispiele HTML5-Elemente:<canvas>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript“>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
M. Steinberg HTML5 versus Flash 07.12.2011 32

33. Zusammenfassung
M. Steinberg HTML5 versus Flash 07.12.2011 33

34. Zusammenfassung: HTML5 versus Flash
 HTML5 wahrscheinlich schnell auf mehr Plattformen
verfügbar, als Flash:
 Innovative Alternative und Erweiterung zu HTML4.
 Flash auf verfügbaren Plattformen fast 100% kompatibel:
 War bei HTML/CSS noch nie der Fall.
 Komplexe Animationen wie Spiele, Touch-Interaktion,
Ansteuerung externer Geräte, aufwendige Effekte, Motion
Steuerung, 3D in HTML5 noch Zukunftsmusik.
 HTML5 kann teilweise das, was Flash bereits seit Jahren kann.
 Flash wird zu berechtigter Nischenlösung:
 Orientiert sich immer mehr zu 3D und Spielesektor.
M. Steinberg HTML5 versus Flash 07.12.2011 34

35. Zusammenfassung: Einsatz von HTML5
 HTML5 für einige Funktionen geeignet, die bisher nur mit
Flash sinnvoll waren:
 Kleinere Animationen mit HTML5 gut möglich mittels Canvas.
 Native Audio-/Videoeinbindung sehr einfach.
 HTML5 faktisch in fertigem Zustand und nutzbar:
 Mit Release Candidate vergleichbar.
 HTML5 in meisten Browser (wenn auch unvollständig)
implementiert.
 Verwendung von HTML5-Teilen bereits heute:
 Ggf. mit Fallback.
 Empfehlung von W3C.
 Prüfung Browserkompatibilität immer notwendig.
M. Steinberg HTML5 versus Flash 07.12.2011 35

36. Zusammenfassung: Komplexe interaktive
Anwendungen
 Flash und HTML5 in Zukunft immer mehr Schnittmengen:
 Keine so schnelle Verdrängung sondern Nebeneinander.
 Neuverteilung und Verschiebung Aufgabenbereiche.
 Flash in naher Zukunft noch überlegen bei:
 Spieleentwicklung (insbesondere Browsergames).
 ca. 70 Prozent aller Browserspiele sind mit Flash erstellt.
 9 von 10 der Topgames auf Facebook entstanden mit Flash.
 Google+ verlässt sich bei 70 Prozent angebotener Spiele auf Adobe-
Technologie.
 Komplexen Interaktionsszenarien.
 Produkt- und Markeninszenierung (Marketing, Corporate Media)
mit Sound, Animation, Video und 3D.
 HTML5 unzweifelhaft auf Vormarsch.
M. Steinberg HTML5 versus Flash 07.12.2011 36

37. Ausblick: Zukunft HTML5 für Audio-Video
 Audio-Video
 Codec-Problematik wegen Streit der Browsergiganten.
 Cross-Browser-Lösung mit Fallback nötig.
 Verwendung fertiger HTML5-Mediaplayer empfohlen (z.B.
SublimeVideo-Player oder jPlayer.)
 Multimedia-Elemente noch eine der größten Baustellen
von HTML5.
 Aber gute Fundamente in Zukunft für neue Funktionen:
 Video-Annotationen mit <track>
 Untertitel, Kapitel, Metadaten, ...
 Audio Data API
 Samplingrate, Kanäle, Framebuffer, ... auslesen und manipulieren.
 Flash und andere Plugin-Inhalte verwenden
 <embed> und <object> als Standard.
M. Steinberg HTML5 versus Flash 07.12.2011 37

38. Ausblick: Zukunft HTML5 für Spiele
 HTML5 Browsergames hinken Flash-Games noch hinterher:
 Muss nicht so bleiben.
 Alles was derzeit mit Flash entwickelt wird, kann theoretisch auch mit HTML5
und CSS3 umgesetzt werden.
 Weg zu einem vergleichbaren Ergebnis unter Umständen beschwerlicher,
aber möglich.
 Faktoren, die HTML5-Browsergames zum Durchbruch verhelfen
könnten:
 Bessere Grafiken verwenden.
 Desktop-Spiele-Entwickler sollten einbezogen werden.
 Einfachere Animationen.
 Codiere wie in C++.
 WebGL muss stabiler werden.
 Bessere WebGL-Tutorials benötigt.
 Mehr physikalische Engines.
 Kongregate-Pendant (Online Games Hosting Website) für HTML5.
Quelle: T3N, http://t3n.de/news/html5-browsergames-fehlt-damit-richtig-klasse-333093/, 2011.
M. Steinberg HTML5 versus Flash 07.12.2011 38

39. Quellen
 HTML5 - Webseiten innovativ und zukunftssicher, Peter
Kröner, Opensource Press, ISBN 978-3-941841-34-5,
2011.
 W3C HTML5 Spezifikation,
http://www.w3.org/TR/html5/spec.html#contents,
aktualisiert: 25.05.2011.
 Web Hypertext Application Technology Working Group
(WHATWG),
http://www.whatwg.org/specs/web-apps/current-work/multipag
, aktualisiert: 02.12.2011.
 Dynamische iPhone-Anwendungen entwickeln, Lee. S.
Barney, Addison-Wesley, ISBN 978-3-8273-2918-9, 2010.
M. Steinberg HTML5 versus Flash 07.12.2011 39

40. Weitere Links
 Adobe AIR 3 und Flash-Player 11 sind verfügbar!
http://t3n.de/news/adobe-flash-player-11-air-3-verfugbar-334331/, aktualisiert:
04.10.2011.
 What do we need for HTML5 games to be awesome?
http://www.smashinglabs.pl/what-do-we-need-for-html5-games-to-be-awesome
, aktualisiert: 24.09.2011.
 HTML5 Website Showcase: 48 Potential Flash-Killing Demos,
http://www.hongkiat.com/blog/48-excellent-html5-demos/, aktualisiert: 2011.
 Eine kleine Canvas-Einführung,
http://www.peterkroener.de/eine-kleine-canvas-einfuehrung/, aktualisiert:
16.03.2009, Peter Kröner.
 Comparison of layout engines (HTML5 Media) bei Wikipedia,
http://en.wikipedia.org/wiki/Html5_audio#Audio_format_support, aktualisiert:
08.11.2011.
M. Steinberg HTML5 versus Flash 07.12.2011 40

41. Vielen Dank für Ihre
Aufmerksamkeit!
M. Steinberg HTML5 versus Flash 07.12.2011 41

42. Fragen?
Anmerkungen?
Diskussion?
Offener, zukunftsweisender
Web-Standard
gegenüber
erhöhtem Entwicklungs-
/Einarbeitungsaufwand?
M. Steinberg HTML5 versus Flash 07.12.2011 42