flash video vs. html5 video
DESCRIPTION
Kurzer Überblick über HTML5 Video im Vergleich zu Flash VideoTRANSCRIPT
![Page 1: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/1.jpg)
09. Januar 2010
Jakob Schröter
xing.com/profile/Jakob_Schroeter
![Page 2: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/2.jpg)
2
Open Screen Project
Cross-PlatformBrowser-Plugin
97% Verbreitung
DER Video-Standard im Web
![Page 3: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/3.jpg)
Entwurf des W3C und Web Hypertext Application Technology Working Group (WHATWG)
Nachfolger von HTML 4.01, XHTML 1.0 und DOM Level 2 HTML
Bereits teilweise in aktuellen Browsern umgesetzt
3
![Page 4: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/4.jpg)
Video & Audio
4
WorkersCanvas
Drag & Drop
Geolocation
Local StorageOffline Apps
Messages
![Page 5: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/5.jpg)
Ohne Browser-Plugin
Eigene Controls via HTML / CSS
Steuerung per JavaScript
Styling per CSS + Videofilter möglich
Darstellung auf Canvas möglich
5
![Page 6: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/6.jpg)
<video width="320" height="240"
src="video.mp4" poster="video.jpg"
autobuffer autoplay controls>
<div>Sie benötigen einen Browser,
der HTML5 unterstützt.</div>
</video>
<audio src="video.ogg" autoplay></audio>
6
![Page 7: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/7.jpg)
Kein einheitlicher Codec vorgeschrieben!
7
H.264 (MP4)
Patente/Rechtliche Einschränkungen
Hardware-Beschleunigung
Ogg Theora (OGV)
Open Source
![Page 8: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/8.jpg)
<video width="320" height="240"
poster="video.jpg"
autobuffer autoplay controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<div>Sie benötigen einen Browser,
der HTML5 unterstützt.</div>
</video>
8
![Page 9: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/9.jpg)
HTML5-Video mit zwei Videofiles MP4 für Chrome, Safari, iPhone, Android OGV für Firefox, Opera
zudem Flash-Fallback für alte Browserund Internet Explorer verwendet MP4
9
http://camendesign.com/code/video_for_everybody
![Page 10: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/10.jpg)
10
Gehörlos?
Blind?
Fremdsprachig?
Suchmaschinen?
![Page 11: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/11.jpg)
<video src="video.ogv" poster="video.png"
title="HTML5 Demo Video">
<itextlist category="SUB" name="Subtitles"
active="auto">
<itext lang="en"
charset="UTF-8"
src="video.en.srt" />
<itext lang="de"
charset="UTF-8"
src="video.de.srt" />
</itextlist>
</video>
11
![Page 12: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/12.jpg)
1
00:00:15,000 --> 00:00:17,951
At <i>the</i> left we can see…
2
00:00:18,166 --> 00:00:20,083
At the right we can see the...
3
00:00:20,119 --> 00:00:21,962
...the head-snarlers
12
![Page 13: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/13.jpg)
13
Testseite von Dailymotionhttp://www.dailymotion.com/openvideodemo
Video in SVGhttp://www.double.co.nz/video_test/video.svg
Video mit Subtitleshttp://www.annodex.net/~silvia/itext/elephant_with_skin.html
In-Browser Motion-Trackerhttp://htmlfive.appspot.com/static/tracker1.html
![Page 14: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/14.jpg)
14
Flash Video HTML 5 Video
Browserunterstützung fast alle aktuelle, außer IE
Video-Codecs Sorenson, VP6, h.264 Ogg Theora, h.264
Hardware-acceleration nur h.264 nur h.264
(Live) Streaming -
Progressive Download
Bandbreitenanpassung -
Pseudo-Streaming (seek)
DRM -
Fullscreen In Zukunft
Accessibility / SEO -
Open Source Tools -
![Page 15: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/15.jpg)
Breite Unterstützung wird noch dauern
Flash-Fallback zwingend erforderlich!
Steckt noch in den Kinderschuhen
vielversprechenden Alternative zu Flash / Silverlight
15
![Page 16: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/16.jpg)
http://diveintohtml5.org/video.html http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-
video-codec-debate.ars http://www.annodex.net/~silvia/itext/mediafrag.html http://pearce.org.nz/2009/08/configuring-web-servers-for-html5-
ogg.html http://developer.android.com/sdk/android-2.0-highlights.html http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/ http://camendesign.com/code/video_for_everybody
Stand aller Quellen: 08.01.2010 21 Uhr
16
![Page 17: Flash Video vs. HTML5 Video](https://reader035.vdokument.com/reader035/viewer/2022081801/54c496974a79598a7d8b4664/html5/thumbnails/17.jpg)
09. Januar 2010
Jakob Schröter
xing.com/profile/Jakob_Schroeter