Flash Video vs. HTML5 Video
-
Upload
jakob-schroeter -
Category
Technology
-
view
2.532 -
download
0
description
Transcript of Flash Video vs. HTML5 Video
09. Januar 2010
Jakob Schröter
xing.com/profile/Jakob_Schroeter
2
Open Screen Project
Cross-PlatformBrowser-Plugin
97% Verbreitung
DER Video-Standard im Web
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
Video & Audio
4
WorkersCanvas
Drag & Drop
Geolocation
Local StorageOffline Apps
Messages
Ohne Browser-Plugin
Eigene Controls via HTML / CSS
Steuerung per JavaScript
Styling per CSS + Videofilter möglich
Darstellung auf Canvas möglich
5
<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
Kein einheitlicher Codec vorgeschrieben!
7
H.264 (MP4)
Patente/Rechtliche Einschränkungen
Hardware-Beschleunigung
Ogg Theora (OGV)
Open Source
<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
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
10
Gehörlos?
Blind?
Fremdsprachig?
Suchmaschinen?
<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
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
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
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 -
Breite Unterstützung wird noch dauern
Flash-Fallback zwingend erforderlich!
Steckt noch in den Kinderschuhen
vielversprechenden Alternative zu Flash / Silverlight
15
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
09. Januar 2010
Jakob Schröter
xing.com/profile/Jakob_Schroeter