HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

Aaron GustafsonEasy Designs, [email protected]/AaronGustafson

Smart Markup for Smarter Websites

http://slideshare.net/AaronGustafson


HTML5 gives you more controlover your documentsand apps

Paving our “cowpaths”

The process is ongoing…

…but the end is near.

2004 2014

June 2004WhatWG begins work on Web Applications 1.0

2007Work begins at W3C

2014HTML5 Standard?

May 2011HTML5 to Last Call

You can use it now

fault tolerancen. a system’s ability to continue to operate when it encounters and unexpected error.

Browsers ignore what they don’t

understand.

For example<input type="date" name="dob"/>

For example<video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul></video>

Now back to those cowpaths…

A great idea that we lost.

<fig> <img src="photo.jpeg" alt=""/> <caption>Photo of Albert Einstein</caption></fig>

The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html

Albert Einstein

http://www.w3.org/MarkUp/html3/figures.html

http://www.w3.org/MarkUp/html3/figures.html

Microformats brought it back.

<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="caption">Albert Einstein</p></div>

The original “figure” microformat.

Albert Einstein

HTML5 re-imagined it.

<figure> <img src="photo.jpeg" alt=""/> <legend>Albert Einstein</legend></figure>

The original HTML5 figure.

Albert Einstein

Microformats adapted.

<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="captionlegend">Albert Einstein</p></div>

The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure

Albert Einstein

http://microformats.org/wiki/figure

http://microformats.org/wiki/figure

Microformats adapted.

<figure> <img src="photo.jpeg" alt=""/> <figcaption>Albert Einstein</figcaption></figure>

The current (dare I say final?) HTML5 figure.

Albert Einstein

What’s the easiest way towrite HTML5?

<!DOCTYPE html>

Use the new doctype

The HTML4 Lexicon

a

abbr

address area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfn

div

dl dt

fieldsetform

h1 h2 h3 h4 h5 h6

head

html

i

iframe img

input

ins

kbd

label

legend

li

link

map

meta

noscript

object ol

optgroupoption

pparam

pre q samp

script

select

span

style

sub

table

tbody

td

textarea

tfoot

th

thead

title

tr

ul

var

base

bdo b

cite

em

hr menu

small

strongsup

The HTML5 Lexicon

a

abbr

address area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfn

div

dl dt

fieldsetform

h1 h2 h3 h4 h5 h6

head

html

i

iframe img

input

ins

kbd

label

legend

li

link

map

meta

noscript

object ol

optgroupoption

pparam

pre q samp

script

select

span

style

sub

table

tbody

td

textarea

tfoot

th

thead

title

tr

ul

var

base

bdo b

cite

em

hr menu

small

strong

article

aside

audiocanvas

command

datalist

details

embed

figcaptionfigure

footerheader

hgroup

keygen

mark meter

nav

output progress

rprt

ruby

section

source

summary

time

video

wbr

sup

Our focus today

a

abbr

address area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfn

div

dl dt

fieldsetform

h1 h2 h3 h4 h5 h6

head

html

i

iframe img

input

ins

kbd

label

legend

li

link

map

meta

noscript

object ol

optgroupoption

pparam

pre q samp

script

select

span

style

sub

table

tbody

td

textarea

tfoot

th

thead

title

tr

ul

var

base

bdo b

cite

em

hr menu

small

strong

article

aside

audiocanvas

command

datalist

details

embed

figcaptionfigure

footerheader

hgroup

keygen

mark meter

nav

output progress

rprt

ruby

section

source

summary

time

video

wbr

sup

If only life were simpler…

Simplification

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

The html element

<html lang="en">

Simplification

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Character encoding

<meta charset="utf-8" />

Simplification

<link rel="stylesheet" href="style-original.css" type="text/css" /><style type=”text/css”> /* … */</style><script type=”text/javascript” src=”myscript.js”></script>

Styles and scripts

<link rel="stylesheet" href="style-original.css" /><style> /* … */</style><script src=”myscript.js”></script>

Metamorphosis

Nip/tuck

<p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p>

The em elementRepresents a span of text text with emphatic stress.

<p>Please fill out the form below. <strong>Note: allfields are required.</strong></p>

The strong elementRepresents a span of text of great importance.

Evil incarnateThe small elementRepresents so-called “fine print” (e.g. disclaimers, caveats, etc.).

ClarificationThe cite elementThe title of a cited work (e.g. a book, magazine, or journal).

<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms.</p>

Resurrection

<p>This presentation is about <b>HTML5</b>.</p>

The b elementRepresents a span of text offset from its surrounding content, but of no extra importance.

<p>The <code>b</code> and <code>i</code> elementshave been legitimized in HTML5. <i>Go figure.</i></p>

The i elementRepresents a span of text in an alternate voice or mood.

Deeper meaningThe hr elementRepresents a paragraph-level thematic break.

Raw materials

The section elementRepresents a section of a document, typically with a title or heading.

The article elementRepresents a section of content that forms an independent part of a document or site.

<section> </section>

<article> </article>

Organization

section38

section > article39

40

article41

article > section42

The header elementRepresents the header of a section.

The footer elementRepresents the footer of a section.

<header> </header>

<footer> </footer>

Organization

44

header45

46

footer47

article48

article > header49

article50

article > footer51

The nav elementDemarcates a group of navigational links.

<nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p></nav>

Organization

53

nav54

55

nav56

The aside elementDemarcates content that is tangentially related to the primary content.

<article>



<aside>  </aside>

</article>

Organization

58

aside59

The details elementA UI control for hiding optional content. Must contain a summary element, followed by other content.

<details> <summary>This is the visible description</summary> <p>This content would be hidden by default.</p></details>

It’s not implemented in any browser yet, this is just an example of how it could work. (Ripped from http://2010.full-frontal.org).

Organization

http://2010.full-frontal.org

http://2010.full-frontal.org

The figure elementA unit of content (typically referenced by the primary content) that is self-contained. May contain a figcaption element and other content.

<figure id="fig-2"> <table> <caption>2011 Forecast Earnings</caption>  </table></figure>

<figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption></figure>

Organization

Refining the outline

<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...

<h2> W3C standardization process<p> The Web Hypertext Application...<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...

<h2> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...

A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5

1 HTML51.1 W3C standardization process1.2 Markup

Implicit sections

http://en.wikipedia.org/wiki/HTML5






sect

ion

sect

ion


Explicit sections







sect

ion

sect

ion


Explicit sections








sect

ion

sect

ion

Explicit sections



Create explicit sections in an outline.๏ section (obviously)๏ article๏ aside๏ footer๏ header๏ nav

Sectioning elements

1 Title1.1 Subtitle

<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...

Outline limitations

<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...

hgro

up

1 Title

Heading groups FTW!

Establish a new outline.๏ body (obviously)๏ blockquote๏ details๏ fieldset๏ figure๏ td

Sectioning roots

1 Title1.1 Section heading

<h1> Title<p> Text content continues...<p> Text content continues...

<h2> Section heading<p> Text content continues...<blockquote> <h2> Rooted heading <p> Text content continues... <p> Text content continues...<p> Text content continues...<p> Text content continues...

Rooted sections

New elements to consider

The time elementRepresents a date and/or time.

When?

74

time75


When?

<time>October 25, 2010 8:11 PM</time>


When?


<time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time>


When?


<time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time>

<time datetime="2010-10-25T20:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time>

The mark elementRepresents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<ol id="search-results"> <li> <h3><a href="...">Web Upgrade <mark>HTML5</mark> May Weaken Privacy</a></h3> <p>The new language, <mark>HTML5</mark>, could give marketers access to many more details about users' online activities.</p> </li></ol>

Highlighting

80

81

mark82

83

mark

More usable forms

<input type=”datetime”>A UI control for selecting a date and time that includes timezone information.

<input type=”datetime-local”>A UI control for selecting a date and time that does not include timezone information.

<input type=”date”>A UI control for selecting a date with access to all date components (day, month and year).

<input type=” month”>A UI control for selecting a date that provides access to month and year only.

<input type=”time”>A UI control for selecting a time that does not include timezone information.

<input type=”week”>A UI control for selecting a date that provides access to week and year only.

Dates and times

<input type="date" name="dob"/>

Safari

Opera

Dates and times

<input type=”number”>A UI control for selecting a number.

<input type=”range”>A UI control for selecting an imprecise number.

Numbers

<input type="number" name="foo"/>

<input type="range" min="1" max="11" name="foo"/>

Numbers

<input type=”email”>A UI control for entering an email.

<input type=”url”>A UI control for entering a URL.

<input type=”tel”>A UI control for entering a telephone number.

New types

New types

<input type="email" …/> <input type="url" …/>

autocompleteTells the User Agent whether or not the value should be stored.

autofocusTells the User Agent to bring focus to the form control on page load.

formAn id reference to the form to which a given control belongs.

requiredIndicated the form control must be provided a value.

placeholderOffers users a short hint about the required value.

UI control attributes

min and maxLower and upper boundary for an element value (dates, time, and numbers only).

stepThe granularity of values allowed (dates, time, and numbers only).

Value control

<input type="range" min="1" max="11" step="0.5" .../>

patternA regular expression pattern that the User Agent should validate the input against.

Value control

<input type="text" pattern="\d{6}\w{3}" placeholder="6 digits followed by 3 letters" .../>

patternAn id reference to a datalist element containing acceptable values.

Value control

<input type="text" list="countries" name="country"/><datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> </datalist>

95

Truth based on perspective

?

<button>Tweet</button>

<button>Tweet</button><a class=”button”>Tweet</a>

?

<button>Search Mail</button>

<button>Search Mail</button><div>Search Mail</div>

ARIA maps the OS to the web

Semantics+

Landmarks help users navigate quickly

The role attributeDefines the part an element is playing (assuming it’s different than the semantics would otherwise imply).

<section id="main" role="main"> </section>

All the site’s a play...

<header role="banner">

<nav role="navigation">

<form role="search">

<section role="main">

<footer role="contentinfo">

<nav role="navigation">

<aside role="complementary">

Landmark rolesapplicationA region of the page representing a unique software unit executing a set of tasks for its users. It is an area where assistive technologies should also return browse navigation keys back over to the web application in this region.

bannerA region that contains the prime heading or internal title of a page.

complementaryA supporting section of the document that remains meaningful even when separated from the main content.

contentinfoMetadata that applies to the parent document.

formA region of the document that represents a collection of form-associated elements.

mainnavigationsearch

http://www.w3.org/TR/wai-aria/roles#application

http://www.w3.org/TR/wai-aria/roles#application

http://www.w3.org/TR/wai-aria/roles#banner

http://www.w3.org/TR/wai-aria/roles#banner

http://www.w3.org/TR/wai-aria/roles#complementary

http://www.w3.org/TR/wai-aria/roles#complementary

http://www.w3.org/TR/wai-aria/roles#contentinfo

http://www.w3.org/TR/wai-aria/roles#contentinfo

http://www.w3.org/TR/wai-aria/roles#form

http://www.w3.org/TR/wai-aria/roles#form

http://www.w3.org/TR/wai-aria/roles#main


http://www.w3.org/TR/wai-aria/roles#navigation


http://www.w3.org/TR/wai-aria/roles#search


Landmark rolesmainThe main content of a document.

navigationA collection of navigational elements (usually links) for navigating the document or related documents.

searchThe search tool of a web document.







Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroupheadingimglistlistitemmathnotepresentationregionrowrowheaderseparator

http://www.w3.org/TR/wai-aria/roles#article


http://www.w3.org/TR/wai-aria/roles#columnheader

http://www.w3.org/TR/wai-aria/roles#columnheader

http://www.w3.org/TR/wai-aria/roles#definition

http://www.w3.org/TR/wai-aria/roles#definition

http://www.w3.org/TR/wai-aria/roles#directory

http://www.w3.org/TR/wai-aria/roles#directory

http://www.w3.org/TR/wai-aria/roles#document

http://www.w3.org/TR/wai-aria/roles#document

http://www.w3.org/TR/wai-aria/roles#group


http://www.w3.org/TR/wai-aria/roles#heading

http://www.w3.org/TR/wai-aria/roles#heading

http://www.w3.org/TR/wai-aria/roles#img

http://www.w3.org/TR/wai-aria/roles#img

http://www.w3.org/TR/wai-aria/roles#list

http://www.w3.org/TR/wai-aria/roles#list

http://www.w3.org/TR/wai-aria/roles#listitem

http://www.w3.org/TR/wai-aria/roles#listitem

http://www.w3.org/TR/wai-aria/roles#math

http://www.w3.org/TR/wai-aria/roles#math

http://www.w3.org/TR/wai-aria/roles#note


http://www.w3.org/TR/wai-aria/roles#presentation


http://www.w3.org/TR/wai-aria/roles#region


http://www.w3.org/TR/wai-aria/roles#row

http://www.w3.org/TR/wai-aria/roles#row

http://www.w3.org/TR/wai-aria/roles#rowheader

http://www.w3.org/TR/wai-aria/roles#rowheader

http://www.w3.org/TR/wai-aria/roles#separator


<article role="article">

Structural rolesarticleA section of a page that forms an independent part of a document, page, or site.

groupA set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.

noteA section whose content is parenthetic or ancillary to the main content of the resource.

presentationAn element whose implicit native semantics will not be mapped to the accessibility API.

regionA large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents.

separatorA divider that separates and distinguishes sections of content or groups of menu items.













Semantic comparisonAd-hoc ARIA Role HTML5

#header, #top banner header (kind of)

#main, #content main none

#extra, .sidebar complementary, note aside

#footer, #bottom contentinfo footer

#nav navigation nav

.hentry article article

What is this!?

<span role="button">OK</span>

Widget roles


Widget roles

(of course <button>OK</button> would be better)


Widget roles


<div role="alert"> <p>Something went wrong.</p></div>


Widget roles


<div role="alert"> <p>Something went wrong.</p></div>

<div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /></div>

<a class=”button”>Tweet</a>

<a role=”button”>Tweet</a>

role="application"aria-activedescendant="folder-1"

role="tablist"

role="tab"aria-selected="true"aria-controls="folder-1"

role="tab"aria-selected="false"aria-controls="folder-4"

role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"

What’s going on!?

<span> <img src="bold-off.png" alt="bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>

B(off)

B(on)

Widget states

<span> <img src="bold-off.png" alt="not bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>

B(off)

B(on)

Widget states

<span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /></span><span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /></span>

B(off)

B(on)

Widget states

aria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)

Widget states

http://www.w3.org/TR/wai-aria/states_and_properties#aria-busy

http://www.w3.org/TR/wai-aria/states_and_properties#aria-busy

http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext


http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked

http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked

http://www.w3.org/TR/wai-aria/states_and_properties#aria-disabled

http://www.w3.org/TR/wai-aria/states_and_properties#aria-disabled

http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded

http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded

http://www.w3.org/TR/wai-aria/states_and_properties#aria-grabbed

http://www.w3.org/TR/wai-aria/states_and_properties#aria-grabbed

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid

http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid

http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed

http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed

http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected

http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected

http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow

http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow



Highlighting living content

Live regions

Live regions

<input class="tweet-counter" value="140" disabled="disabled">

Live regions

<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>

Live regions

<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>

.hidden { position: absolute; left: −999em;}

Live regions

<span class="tweet-counter">maximum of 140 characters</span>

<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>

Live regions

<span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>

Live regions

Notification optionsoffchange not announced

politechange announced after user completes her current activity

assertiveuser agent should interrupt the user’s activity, but not immediately

Who is Supporting WAI-ARIA?

Music to our ears

The audio element

<audio src="my.oga" controls="controls"></audio>

Can you hear me now?

Can you hear me now?Browser .aac .mp3 .oga .wav

Chrome 6+ YES YES YES NO

Firefox 3.6+ NO NO YES YES

Internet Explorer 9+ YES YES NO YES

Opera 10.5+ NO NO YES YES

Safari 5+ YES YES NO YES

<audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> </audio>


Available attributessrcURL for the audio file.

autoplayA boolean specifying whether or not the file should play as soon as it can.

loopA boolean specifying whether or not playback of the file should be repeated.

controlsA boolean that tells the browser to use its default media controls.

preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”

autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.

<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> </audio>


<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <ul> <li><a href="my.mp3">Download as audio/mp3</a></li> <li><a href="my.oga">Download as audio/ogg</a></li> </ul></audio>

Fallback options

<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <object …>  </object></audio>

Fallback options

$('audio').each(function(){ var $audio = $(this), media = {}, formats = []; $audio.find('source').each(function(){ var src = $(this).attr('src'), ext = src.split('.').pop(); media[ext] = src; formats.push(ext); }); $audio.jPlayer({ swfPath: '/vendors/jPlayer', ready: function(){ $audio.jPlayer('setMedia', media); }, supplied: formats.join(', ') }); });

Fallback options

Using jQuery & jPlayer

$('audio').each(function(){ var audio = this, $button = $('<button>Play</button>') .click(function(){ audio.play(); }); $(this) .removeAttr('controls') .after($button); });

Roll your own

Using jQuery

Opiate of the masses

The video element

<video src="my.ogv" controls="controls"></video>

Elementary, my dear Watson

Not so elementaryVideo file = container file (like ZIP)

๏ 1 video track๏ 1 (or more) audio tracks๏ metadata๏ subtitle/caption tracks (optional)

Not so elementaryVideo formatsFlash Video (.flv)Prior to 2008, the only video format supported in Adobe Flash.

MPEG 4 (.m4v or .mp4)Based on QuickTime; iTunes uses this format.

Ogg (.ogv)Open source container format.

WebM (.webm)New format announced in May 2010.

Not so elementaryVideo codecsH.264Used primarily in MPEG 4. Only video codec natively supported on iOS. Patented.

TheoraUsed primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).

VP8Used primarily in WebM. Owned by Google, but licensed royalty-free.

Not so elementaryAudio codecsMP3Nearly universal in usage, but was part of FLV. Patented.

AAC (Advanced Audio Coding)Used primarily in MP4. Patented.

VorbisUsed in Ogg audio & video as well as WebM. Royalty-free.

Not so elementaryBrowser .m4v

(AAC + H.264)

.ogv(Vorbis + Theora)

.webm(Vorbis + VP8)

Chrome 3+(for now)

3+ 6+

Firefox NO 3.5+ 4+

Internet Explorer 9+ NO MAYBE

Opera NO 10.5+ 10.6+

Safari 3.1+ MAYBE MAYBE

<video controls="controls" width="640" height="480"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> </video>

Format juggling

<video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> </video>

A good first impression

<video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/> <source src="my.webm" type='video/webm; codecs="vp8, vorbis"'/> <source src="my.ogv" type='video/ogg; codecs="theora, vorbis"'/> </video>

Kindness to strangers

Note: The MPEG 4 codec will depend on the encoding “profiles” you use.

Available attributessrcURL for the audio file.

autoplayA boolean specifying whether or not the file should play as soon as it can.

loopA boolean specifying whether or not playback of the file should be repeated.

controlsA boolean that tells the browser to use its default media controls.

posterThe image to be shown while the video is not activated.

preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”

autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.

AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm

No MIME, no service

<video width="600" height="400" poster="/r/2-5.png" controls="controls" preload="none"> <source src="/r/2-5.m4v" type="video/mp4"/> <source src="/r/2-5.webm" type="video/webm"/> <source src="/r/2-5.ogv" type="video/ogg"/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul> <li><a href="/r/2-5.m4v">Download as video/mp4</a></li> <li><a href="/r/2-5.webm">Download as video/webm</a></li> <li><a href="/r/2-5.ogv">Download as video/ogg</a></li> </ul></video>

Fallback options

<video width="600" height="400" poster="/r/2-5.png" controls="controls" preload="none"> <source src="/r/2-5.m4v" type="video/mp4"/> <source src="/r/2-5.webm" type="video/webm"/> <source src="/r/2-5.ogv" type="video/ogg"/> <object width="600" height="400" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf"/> <param name="allowfullscreen" value="true"/> <param name="flashvars" value='config={"clip": {"url": "/r/2-5.m4v", "autoPlay":false, "autoBuffering":true}}'/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul></ul> </object></video>

Fallback options

For More:@AaronGustafson

http://adaptivewebdesign.infohttp://easy-designs.nethttp://easy-reader.net

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons Attribution-Noncommercial-Share Alike 3.0

flickr Photo Credits“2008 06 11 - 3257 - Washington DC - N Portal Dr at 16th St.” by thisisbossi

“Aruba” by Salvatore.Freni“IMG_6200” by pcutler

“Construction material” by raisin bun“TOC” by D'Arcy Norman

“HTML5 logo in Braille” by Ted Drake“Dual Samsung Monitors” by steve-uk

“Statue of liberty” by gadl“Lego creation” by MiikaS

“iFlickr touch screen” by exfordy“Green Plant” by kevin1024“08-jan-28” by sashafatcat

“Revere EIGHT - 8mm…” by Kevitivity

http://twitter.com/AaronGustafson

http://twitter.com/AaronGustafson

http://adaptivewebdesign.info

http://adaptivewebdesign.info

http://easy-designs.net

http://easy-designs.net

http://easy-reader.net

http://easy-reader.net



http://creativecommons.org/licenses/by-nc-sa/3.0/us/

http://creativecommons.org/licenses/by-nc-sa/3.0/us/

http://www.flickr.com/photos/silwenae/4960887610/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/silwenae/4960887610/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/silwenae/

http://www.flickr.com/photos/silwenae/

http://www.flickr.com/photos/bunchan/470105390/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/bunchan/470105390/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/bunchan/

http://www.flickr.com/photos/bunchan/

http://www.flickr.com/photos/stevelacey/3949026708/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/stevelacey/3949026708/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/stevelacey/

http://www.flickr.com/photos/stevelacey/

http://www.flickr.com/photos/gadl/445650912/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/gadl/445650912/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/gadl/

http://www.flickr.com/photos/gadl/

http://www.flickr.com/photos/miikas/231847277/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/miikas/231847277/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/miikas/

http://www.flickr.com/photos/miikas/

http://www.flickr.com/photos/exfordy/2348628910/in/gallery-aarongustafson-72157623548439715/

http://www.flickr.com/photos/exfordy/2348628910/in/gallery-aarongustafson-72157623548439715/

http://www.flickr.com/photos/exfordy/

http://www.flickr.com/photos/exfordy/

http://www.flickr.com/photos/kevin1024/2430633488/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/kevin1024/2430633488/in/gallery-aarongustafson-72157626657356405/

http://www.flickr.com/photos/kevin1024/

http://www.flickr.com/photos/kevin1024/

http://www.flickr.com/photos/sashafatcat/2227288649/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/sashafatcat/2227288649/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/sashafatcat/

http://www.flickr.com/photos/sashafatcat/

http://www.flickr.com/photos/sgt_spanky/3970722137/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/sgt_spanky/3970722137/in/gallery-aarongustafson-72157625106555239/

http://www.flickr.com/photos/sgt_spanky/

http://www.flickr.com/photos/sgt_spanky/

Technology

HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]