html5 kickstart - brooklyn beta workshop 21.10.2010

Post on 15-May-2015

1.418 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

HTML5 kickstart

Patrick H Lauke Brooklyn Beta workshop 21 October 2010

Brooklyn Beta workshop

Web Evangelist at Opera

should I use HTML5 today

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Web Evangelist at Opera

should I use HTML5 today

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

should I use HTML5 today

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

top related