I’ve just been hired by INRIA to develop a Mozilla-based, multimedia-dedicated, web authoring tool. I’m working in a team that has been very active in the SVG and SMIL working groups and that has developed Amaya a while ago. After three months working here, I came up with two conclusions:
- the full SMIL spec (≠ SVG animations) is completely overkill for web browsers
- the SMIL/Timing module is magic: simple to use and offers a lot of cool features to web pages like timing, media synchronization and user interaction management. I wish this could be part of HTML5!
Here’s a quick overview of SMIL/Timing and how we can use it in web pages. The full story and all the demos are on labs.kompozer.net/timesheets.
Timesheet Scheduler (Demo!)
The full demo is available here: labs.kompozer.net/timesheets.
Instead of trying to implement the whole SMIL/Timing spec, I’ve focused on four basic use cases:
- Rotating Banner
- a simple example to demonstrate the basic concepts of time containers
- HTML Subtitles
synchronizing rich subtitles with a video stream
(requires <video> support)
- Annotated Audio
synchronizing textual descriptions of musical sections
and introducing declarative user interaction
(requires <audio> and SVG support)
- Slideshow Engine
- nesting time containers to create a highly flexible slideshow engine
This demo works with all modern browsers: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.60+.
Firefox users: these demos work with Firefox 3.x but you’ll get a better experience with Firefox 4 (read: with CSS transition support).
Internet Explorer users: I’m afraid your browser isn’t supported yet — the IE9 support should come soon, though.
Here’s an overview of the markup used in the first slideshow:
<div class="highlight" smil:timeContainer="excl" smil:first="restart.click">
<div id="slide1" smil:begin="0:00" smil:timeContainer="par">
<p> Ever wanted to… </p>
create your own slideshow in HTML?
synchronize HTML content with multimedia streams?
<small>(subtitles, transcriptions, annotations…)</small>
animate HTML elements?
<div id="slide2" smil:begin="0:12" smil:timeContainer="par">
<div id="slide3" smil:begin="0:24" smil:timeContainer="par">
<p smil:begin="0:04" class="menu">
<a href="about.xhtml">Learn more…</a>
The markup is rather self-explanatory and relies on two basic concepts
- time containers define the timing model of child nodes (<par>allel, <seq>uential or <excl>usive);
- the "begin" and "dur" attributes provide a basing timing description. Yes, this is the same syntax as the one used in SVG Animations.
That’s simple and efficient. The four examples on labs.kompozer.net/timesheets should be a step-by-step tutorial, and I have a few other demos in mind that I’ll add with the next release of our timesheet scheduler.
References: SMIL Timing and Timesheets
The modularization of SMIL 3.0 functionality allows language designers to integrate SMIL Timing and Synchronization support into any XML language. In addition to just scheduling media elements as in SMIL language documents, timing may be applied to the elements of the host language. For example, the addition of timing to HTML (i.e. XHTML) elements will control the presentation of the HTML document over time, and to synchronize text and presentation with continuous media such as audio and video.
Two attributes are introduced to support these integration cases. The timeContainer attribute allows the author to specify that any XML language element has time container behavior. E.g., an HTML
<ol>ordered list element may be defined to behave as a sequence time container. The timeAction attribute allows the author to specify what it means to apply timing to a given element.
The SMIL/Timesheets draft suggests another way to use SMIL/Timing (and SMIL/BasicAnimation) with HTML documents:
This language allows SMIL timing to be integrated into a wide variety of a-temporal languages, even when several such languages are combined in a compound document. Because of its similarity with external style and positioning descriptions in the Cascading Style Sheet (CSS) language, this functionality has been termed SMIL Timesheets.
SMIL Timesheets can be seen as a temporal counterpart of CSS. Whereas CSS defines the spatial layout of the document and formatting of the elements, SMIL Timesheets specify which elements are active at a certain moment and what their temporal scope is within a document. And as with CSS, SMIL Timesheets can be reused in multiple documents, which can provide a common temporal framework for multimedia presentations with different contents but identical storylines.
In other words, we’re not re-inventing the wheel or thinking of another slideshow engine: we’re just implementing an official W3C recommendation.
What's The Point?
Web Browsers Already Support SMIL
No they don't.
Modern web browsers (read: all except Internet Explorer) support declarative SVG Animations, which rely on the SMIL/BasicAnimation module — hence the (common) confusion — but can't be used for HTML timing. They don't support the whole SMIL recommendation.
Why Don't You Implement SMIL Instead?
The SMIL spec is huge, it includes a specific box-model which is very far from the HTML/CSS one, and it's only partially implemented by a few media players. It might be possible to implement SMIL in modern web browsers, too, but we think it would be inadequate:
- web authors would have to learn SMIL, which is much more difficult to use than HTML
- we don't want to include a SMIL section in a web page: we want to control the timing of the whole web page!
- HTML5 and CSS3 are already fine to describe the content and layout; all we need is a standard, declarative timing language.
SMIL has been designed for advanced synchronization tasks. Some SMIL aspects have already been ported to web standards (e.g. SVG animations and CSS transitions), our project is about porting SMIL/Timing and Timesheets to web documents.
effects if you don't want to use the CSS
- that's much easier for web authors (and for web authoring tool developers);
- that's a much better way to achieve a good accessibility / indexability;
IE Already Supports HTML+Time And Nobody Cares
True: Microsoft started supporting HTML+TIME 10 years ago with IE 5.5; but without SVG, <audio|video> elements and CSS transitions, there hasn't been many real-life use cases so far.
We think it's more than time to bring a modern, standard equivalent of HTML+Time to the web. Especially for multimedia-related tasks.
Bugfixing: before starting to work on the new editor, I have to get a stable Timesheet Scheduler first. In case you want to contribute: this JS lib is open-source (MIT license), code reviews and patches are welcome.
Event-values support: I’m not planning to implement the whole SMIL/Timing spec but at the very least, I need a better event-values support to describe more complex user interactions. Our goal is to get a full-featured web documentary engine.
Timesheet Editor: the final goal of this project is to get an easy-to-use, multimedia page authoring tool. It will be based on Kompozer / SeaMonkey Composer, which will leave me some time to port Kompozer to Gecko 2 and backport most of its code to SeaMonkey. Yes, somehow I’ll get paid to work on Kompozer! *\o/*
Many thanks to Anthony Ricaud for his tips, and to Kompozer contributors for their early feedback.