Kurzer Überblick über HTML5 Video im Vergleich zu Flash Video

1. 09. Januar 2010
Jakob Schröter
xing.com/profile/Jakob_Schroeter

2. Cross-Platform
Browser-Plugin
Open Screen Project
97% Verbreitung
DER Video-Standard im Web
2

3.  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

4. Canvas
Geolocation
Workers
Drag & Drop
Messages
Offline Apps
Local Storage
Video & Audio
4

5.  Ohne Browser-Plugin
 Eigene Controls via HTML / CSS
 Steuerung per JavaScript
 Styling per CSS + Videofilter möglich
 Darstellung auf Canvas möglich
5

6. <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

7. Kein einheitlicher Codec vorgeschrieben!
 Ogg Theora (OGV)  H.264 (MP4)
 Open Source  Patente/Rechtliche
Einschränkungen
 Hardware-
Beschleunigung
7

8. <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

9.  HTML5-Video mit zwei Videofiles
 MP4 für Chrome, Safari, iPhone, Android
 OGV für Firefox, Opera
 zudem Flash-Fallback für alte Browser
und Internet Explorer
 verwendet MP4
http://camendesign.com/code/video_for_everybody
9

10. Fremdsprachig?
Blind?
Suchmaschinen? Gehörlos?
10

11. <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

12. 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 Dailymotion
http://www.dailymotion.com/openvideodemo
 Video in SVG
http://www.double.co.nz/video_test/video.svg
 Video mit Subtitles
http://www.annodex.net/~silvia/itext/elephant_with_ski
n.html
 In-Browser Motion-Tracker
http://htmlfive.appspot.com/static/tracker1.html
13

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 - 
14

15.  Breite Unterstützung wird noch dauern
 Flash-Fallback zwingend erforderlich!
 Steckt noch in den Kinderschuhen
 vielversprechenden Alternative zu Flash /
Silverlight
15

16.  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

17. 09. Januar 2010
Jakob Schröter
xing.com/profile/Jakob_Schroeter