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