oclc.org 2011 html5 · • if you are hot to trot for html5 video, like, right now, check out mark...
TRANSCRIPT
![Page 1: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/1.jpg)
OCLC.ORG 2011
HTML5 D E S I G N
Christopher Schmitt | http://twitter.com/@teleject
❦
![Page 2: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/2.jpg)
2
THINGS ARE GOOD BETWEEN US, XHTML, RIGHT? I MEAN. WE GET ALONG WELL. AND WE BOTH LIKE STUFF.3
![Page 3: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/3.jpg)
http://dev.opera.com/articles/view/mama-markup-validation-report/
3
![Page 4: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/4.jpg)
4
![Page 5: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/5.jpg)
“THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML,
INCLUDING QUOTES AROUND ATTRIBUTE VALUES AND
SLASHES IN EMPTY TAGS AND NAMESPACES ALL AT ONCE
DIDN’T WORK.”
SIR TIM BERNERS-LEE5
![Page 6: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/teleject/432030263/6
![Page 7: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/7.jpg)
7
![Page 8: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/8.jpg)
8
![Page 9: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/9.jpg)
9
![Page 10: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/10.jpg)
10
![Page 11: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/11.jpg)
11
![Page 12: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/12.jpg)
BLUEPRINTS VS REALITY
12
http://www.amazon.com/gp/product/0140139966
![Page 13: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/13.jpg)
“TAKE CARE OF THE LUXURIES AND
THE NECESSITIES WILL TAKE CARE OF THEMSELVES.”
FRANK LLOYD WRIGHT
13
![Page 14: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/14.jpg)
AGENDA ITEMS
•What’s different from XHTML to HTML5
• Building with HTML5 (You are here.)
• Video
• Audio
• GeoLocation
• Prizes! http://interactwithwebstandards.com/
14
![Page 15: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/15.jpg)
BUILDING WITH HTML5
15
![Page 16: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/16.jpg)
DOCTYPE
16
![Page 17: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/17.jpg)
HTML 4.01 Transitional DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
XHTML 1.0 Transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
17
![Page 18: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/18.jpg)
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body></html>
18
![Page 19: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/19.jpg)
EXERCISE• Go to HTML validator at
http://validator.w3.org/#validate_by_input
• Then type the following HTML (below) and hit validate:
<!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p>
19
![Page 20: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/20.jpg)
20
![Page 21: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/21.jpg)
21
![Page 22: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/22.jpg)
SYNTAX
22
![Page 23: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/23.jpg)
<img src=“file.png” />
23
![Page 24: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/24.jpg)
<IMG SRC=file.png />
24
![Page 25: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/25.jpg)
<iMg SrC=file.png />
25
![Page 26: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/26.jpg)
<IMG SRC=file.png />
26
![Page 27: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/27.jpg)
<video controls=“controls”>
27
![Page 28: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/28.jpg)
28
EVERYTHING THAT WAS BAD IN 1999IS GOOD AGAIN
![Page 29: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/29.jpg)
PAGE STRUCTURE
29
![Page 30: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/30.jpg)
DIV ID=“header”
DIV ID=“section”
DIV ID=“article”DIV ID=“sidecolumn”
DIV ID=“footer”
DIV ID=“nav”
30
![Page 31: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/31.jpg)
<HEADER>
<SECTION>
<ARTICLE><ASIDE>
<FOOTER>
<NAV>
31
![Page 32: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/32.jpg)
ARTICLE VS ASIDE VS SECTION
• Molly Holzschlag, Opera standards evangelist, says:
• <section> clarifies <div>
• <article> 'replaces' <div id="content">
• <aside> 'replaces' <div id="sidebar">
• Chris Mills, Opera browser employee, plays it safe: http://boblet.tumblr.com/post/130610820/html5-structure1
32
![Page 33: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/33.jpg)
WHAT ABOUT THE DIVS?
• Marc Grabanski, jQuery and HTML5 guy:
• “div has no meaning whatsoever, so there is nothing semantic about divs”
• Bruce Lawson, Opera browser employee:
• “Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, it's a div.”
33
![Page 34: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/34.jpg)
<body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul> </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section> <aside> <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer></body>
34
![Page 35: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/35.jpg)
35
![Page 36: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/36.jpg)
36
![Page 37: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/37.jpg)
<script type="text/javascript">document.createElement('header');document.createElement('nav');document.createElement('section');document.createElement('article');document.createElement('aside');document.createElement('footer');</script>
http://ejohn.org/blog/html5-shiv/37
![Page 38: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/38.jpg)
38
![Page 39: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/39.jpg)
PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM)
39
![Page 41: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/41.jpg)
41
<script src="-/js/modernizr.min.js" type="text/javascript" ></script>
![Page 42: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/42.jpg)
42
<html lang="en" class=" canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">
![Page 43: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/43.jpg)
43
content { ... }
.geolocation content { ... }
![Page 44: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/44.jpg)
44
<script src="modernizr.js"></script>
...
<script> if (!Modernizr.input.autofocus){ $("#fieldname").focus(); }</script>
![Page 45: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/45.jpg)
CLOSERLOOK AT HTML5 ELEMENTS
45
![Page 46: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/46.jpg)
HTML5 AUDIO
46
![Page 47: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/47.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><audio src="html5test.ogg" autoplay controls> <a href="html5test.ogg">Download audio</a></audio> </body></html>
47
![Page 48: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/48.jpg)
48
DEMO
![Page 49: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/49.jpg)
HTML5 AUDIO
• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS
• If you don’t have CONTROL, player becomes transparent
49
![Page 50: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/50.jpg)
HTML5 AUDIO SUPPORT
FF3.5+ S4+ Ch3+ Op10.5+ IE9
Ogg Vorbis
MP3
WAV
Y Y Y
Y Y Y
Y Y Y
50
![Page 51: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/51.jpg)
SUPPORTING AUDIO
<audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT code here --> </audio>
51
![Page 52: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/52.jpg)
HTML5 VIDEO
52
![Page 53: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/53.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> </body></html>
53
![Page 54: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/54.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><video src="html5test.ogg" width="320" height="240" controls poster="html5testvideoposter.jpg"> <a href="html5testvideo.ogg">Download movie</a></video> </body></html>
54
![Page 55: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/55.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><video src="html5test.ogg" width="320" height="240" controls poster="html5testvideoposter.jpg"> <a href="html5testvideo.ogg">Download movie</a></video> </body></html>
55
DEMO
![Page 56: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/56.jpg)
HTML5 VIDEO
• WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself.
• Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value.
• Text can be included within VIDEO element to allow user to download video if their browser doesn’t support.
• If you want to give users control, use CONTROL attribute.
56
![Page 57: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/57.jpg)
HTML5 VIDEO
• Video can start automatically if using the AUTOPLAY=”1” attribute and value.
• Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1.
• Codecs support...
57
![Page 58: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/58.jpg)
HTML5 VIDEO
“It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known
to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of
sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue
and this section will be updated once more information is available.”
- http://www.whatwg.org/specs/web-apps/current-work/#video-and-audio-codecs-for-video-elements
58
![Page 59: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/59.jpg)
CODECS• Ogg (or “Vorbis”)
• No need to worry about patents
• H.264
• Created by the MPEG group
• If you have blu-ray disc player, you are using it
• WebM
• A wrapper for the VP8 video and Ogg audio streams
59
![Page 60: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/60.jpg)
VIDEO CODEC SUPPORT
FF3.6+ S Ch5+ Op10.6+ IE9
Ogg
H.264
WebM
Y Y Y
Y Y* Y
(W4.02+) (Ch6+) Y
60
![Page 64: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/64.jpg)
LESSONS LEARNED
• Use VLC or Firefogg to encode common movie files types to OGG
• H.264 encoding? Use Handbrake
• If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial: http://diveintohtml5.org/video.html
• Good primer: http://dev.opera.com/articles/view/introduction-html5-video/
64
![Page 65: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/65.jpg)
65
![Page 66: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/66.jpg)
66
![Page 67: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/67.jpg)
<script> function playPause() { var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script>
67
![Page 68: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/68.jpg)
<input type=button onclick="playPause()" value="Play/Pause" tabindex="0" />
68
![Page 69: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/69.jpg)
HTML5 VIDEO & CAPTIONS
69
![Page 70: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/70.jpg)
[Captioning] has been shown to improve reading skills among adults who are non-readers.
http://www.ldonline.org/article/3579370
![Page 71: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/71.jpg)
71
![Page 72: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/72.jpg)
72
DEMO
![Page 73: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/73.jpg)
QUICK & DIRTYCAPTIONING
73
![Page 75: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/75.jpg)
75
![Page 76: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/76.jpg)
76
![Page 77: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/77.jpg)
SRT FILES• SRT files are text files used in video playback; therefore, they do
not contain any video data.
• Text file containing subtitles used by various video playback programs; supported by DivX, DVD, and other video formats;
• Includes the time each subtitle should be displayed followed by the text of the subtitles.
• Subtitle files are often named according to the language of the subtitles, i.e. "moviename-eng.srt" for English and "moviename-ger.srt" for German subtitles.
77
![Page 78: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/78.jpg)
TRANSCRIPT-EN.SRT100:00:00,000 --> 00:00:6,000Allow me to introduce myself My name is Tay It's T-A-Y, T-A-Y to the Z
200:00:06,000 --> 00:00:9,000This is the web and it's gonna murder your TV It was Chocolate Rain
300:00:09,500 --> 00:00:11,500Wrote a song about that history Chocolate Rain
400:00:12,000 --> 00:00:15,000Now I'm paid a hefty hefty fee Chocolate Rain
78
![Page 79: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/79.jpg)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script>
79
![Page 80: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/80.jpg)
<video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffer controls> <track src="transcript-en.srt" type="text/srt" language="en" role="textaudesc"></track> <track src="transcript-gr.srt" type="text/srt" language="gr" role="textaudesc"></track> <p>Alternative text...</p> </video>
80
![Page 81: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/81.jpg)
<video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffer controls> <track src="transcript-en.srt" type="text/srt" language="en" role="textaudesc"></track> <track src="transcript-gr.srt" type="text/srt" language="gr" role="textaudesc"></track> <p>Alternative text...</p> </video>
81
![Page 82: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/82.jpg)
82
HTML5 & GEOLOCATION
![Page 83: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/83.jpg)
83
![Page 84: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/84.jpg)
84
![Page 85: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/85.jpg)
85
![Page 86: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/86.jpg)
86
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(show_coordinates); function show_coordinates(position){ alert('Your latitude is ' + position.coords.latitude + ' ' + 'and your longitude is ' + position.coords.longitude + '.'); }}
![Page 87: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/87.jpg)
87
![Page 88: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/88.jpg)
88
http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin
![Page 89: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/89.jpg)
<div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div>
<div class="adr"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div></div>
89
http://microformats.org/code/hcard/creator
![Page 90: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/90.jpg)
90
<div id="locations2"> <ol> <li><!-- Microformats address 1 --></li> <li><!-- Microformats address 2 --></li> <li><!-- Microformats address 3 --></li> <li><!-- Microformats address 4 --></li> ... </ol></div>
![Page 91: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/91.jpg)
91
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.1.0.0.js"></script>
![Page 92: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/92.jpg)
92
![Page 93: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/93.jpg)
93
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.1.0.0.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#locations2').location({ 'apiKey' : 'YOUR_API_KEY_HERE' }); });</script>
![Page 94: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/94.jpg)
94
http://2010.incontrolconference.com/eats/
![Page 95: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/95.jpg)
<div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div>
<div class="adr" data-longitude="-97.723410" data-latitude="30.262098"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div></div>
95
http://geocoder.us/
![Page 96: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/96.jpg)
$('#locations').location( { apiKey: 'YOUR_API_KEY_HERE', geodata: '#geodata', // site visitor’s location notification: '.notification', // progress indicator recheck: '.recheck', distance: '.distance', //where the distance appears geoAdr: '.geoAdr', // longitude and latitude listElement: 'li' // different listing element? } );
96
![Page 97: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/97.jpg)
97
XHTML, ...I THINK I WANT TO SEE ANOTHER MARKUP SPEC.
![Page 98: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/98.jpg)
TAKE AWAYS
• New HTML5 elements for improved semantics
• HTML5 Audio
• HTML5 Video
•Online video with HTML+JS captioning
• HTML5 Geolocation
98
![Page 99: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/99.jpg)
RECOMMENDED
• Universal Design for Web Applications by Matt May and Wendy Chisholm
• Bulletproof Ajax by Jeremy Keith
• Designing with Progressive Enhancement by Filament Group
•Microformats Made Simple by Emily Lewis
99
![Page 100: OCLC.ORG 2011 HTML5 · • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial:](https://reader034.vdocument.in/reader034/viewer/2022042620/5acffaaa7f8b9a4e7a8d5847/html5/thumbnails/100.jpg)
UPCOMING E4H EVENTS
•Online, live 3rd Annual CSS Summit on July 26-27th
•Online, live Mobile JavaScript Summit on Aug. 30th
•Online, live 2nd Annual Accessibility Summit on Sept. 27th
•More details at http://twitter.com/@e4h
100