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