HTML Timing?

Ever wanted to…

• create your own slideshow in HTML?
• synchronize HTML content with media streams? (subtitles, transcriptions, annotations…)
• animate HTML elements?

…without writing any single line of JavaScript?

SMIL Timing & Timesheets

• a declarative standard — W3C recommendation
  (= one of the 12 SMIL modules)
• designed for XML element synchronization
  (works fine with HTML and SVG, too)

timeContainer = "par|seq|excl"

specify a temporal behaviour to any HTML/SVG container

timeAction = "display|visibility|class:[className]|style|intrinsic"

defines how an element is to be activated / unactivated

“HTML Timing” Project

a.k.a. the “two-step world domination plan”

1. SMIL Timing implementation
   (MIT license — less than 10 KB of JavaScript)
   • to “animate” HTML elements
   • to synchronize HTML5 <audio|video> media
   • to design slideshows, web documentaries, multimedia presentations…
2. development of a wysiwyg editor
   (GPL/LGPL/MPL license — based on Mozilla Composer)
3. possible SVG2 / HTML5 proposal

timeContainer="seq"

A seq container defines a sequence of elements in which elements play one after the other.

1. first item
2. second item
3. third item
4. fourth item
5. last item

timeContainer="par"

A par container, short for "parallel", defines a simple time grouping in which multiple elements may play back at the same time.

1. first item
2. second item
3. third item
4. fourth item
5. last item

timeContainer="excl"

Similar to par, but only one child element may play at any given time.
If any element begins playing while another is already playing, the element that was playing is stopped.

1. first item
2. second item
3. third item
4. fourth item
5. last item

Event-Values

begin="[elementID].[event]"

click me

The quick brown fox jumps over the lazy dog.

click me

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Event-Values

same thing with an <excl> container:

• first item
  1. one
  2. two
  3. three
  4. four
• second item
  1. un
  2. deux
  3. trois
  4. quatre
• last item
  1. uno
  2. dos
  3. tres
  4. cuatro

Lazy Interaction

[first|prev|next|last]="[elementID].[event]"

applies to <seq> and <excl> containers:

Rotating Banner

source: PortableLinuxApps.org

Video Subtitles

source: mozilla.com

Audio Annotations

source: apm.ircam.fr/page/audio-tag

While the three other instruments hold a cluster of high notes, the cellist’s silent gestures interact with them, provoking a windy sonority that becomes noisier as the cellist’s gestures become more energetic.

A short interlude employing conventional playing techniques (bows are applied on the strings in the usual way, though sounds are still high and dissonant).

A rich mixture of tremolos and glissandos at various speeds in the highest register. Each part of the quartet descends progressively into the medium register: a sound colour with greater solidity emerges.

The first violin plays high notes once again, this time “flautando” i.e. with a flute-like tone (by lightly bowing across the end of the fingerboard). The other instruments follow suit until a disparate mix of “flautando” and “sul ponticello” is established and enriched by granular synthesis from the electronics.

Louder notes and groups of notes irregularly irrupt, often using a “gettato” bow stroke: the player lets the bow freely rebound against the string-once or several times in a row like a ping pong ball.

From this point onward all the preceding techniques are increasingly varied and combined. Identifying them becomes more challenging. Good luck!

0:00 => 0:36 0:36 => 0:43 0:43 => 1:09 1:09 => 2:04 2:04 => 3:10 3:10 => 4:09

0:00

HTML5 MediaElement

See: wam.inrialpes.fr/timesheets/html5media

• Firefox, Chrome and Opera support free codecs:

  OGG/Vorbis, OGG/Theora, WebM/VP8 (≃40% market share)

• IE9 and Safari support patented codecs:

  MP3, AAC, MP4/H264 (≃10% market share, growing w/ IE9)

• IE6, IE7, IE8 don’t support HTML5 Media at all

  ⇒ Flash™ (≃50% market share, decreasing)

Solution: double encoding of all media files
and/or use a Flash™-based, MediaElement.js fallback.

Slideshows

A <seq> time container is a good basis for a slideshow engine:

• each slide is a child of this main <seq> time container
• the first|prev|next|last attributes provide a navigation menu "out of the box"
• setting an ID attribute to each slide allows to use hyperlinks to get a direct access

Progressive Display

• On this slide
• the list items
• appear one after another
• at 2s intervals.

The next slide will appear in 10s or if you click on the "Next" button below — whatever comes first.

Incremental Display

• Click on this slide
• and the list items
• will appear
• one after another.

(you still have to click the "next" button to get the next slide)

Mozilla

Timesheet

E.N.S.

Timesheet

Key Benefits

• content / presentation=CSS / animation=SMIL
  (check the “Timesheets” section on our website)
• declarative management of user interactions
  ⇒ little to no JavaScript code to write
• extensible using DOM events (onbegin/onend)
• stable syntax: W3C recommendation
  (maybe in SVG2 or HTML5 some day?)
• lightweight JavaScript library (<10 KB)
  cross-browser, no jQuery/YUI/whatever dependency

Roadmap

• v0.1: basic timing
• v0.2: support IE<9
• v0.3: event-values
• v0.4: Flash™ fallbacks for IE<9
• v1.0: JavaScript API (HTMLMediaElement)

+ development of a wysiwyg editor
for HTML5 + SMIL/Timing

Easy Authoring

Work in progress:

• standalone “wysiwyg” Timesheet Editor
• WebRadio component for SCENARI

Possible implementations:

• online slideshow editor: AXEL (JS)
• SMIL to HTML5 export: LimSee3 (Java)
• Timesheet module for Jaxe? (Java)