Timeline-dijit by Websemantics, Inc.

Timeline-dijit is a lightweight and flexible Dijit Widget for timeline representation of <audio/> or <video/> HTML5 tag; based on timeline-js. Timeline-dijit supports SVG, VML and HTML5 Canvas.

Select time event to resize/relocate. Resize the widget by dragging the separator '|', Move time needle by dragging the mouse cursor on the scale.

Read the examples with Chrome or Firefox. This is not a library limitation, but only a codec limitation : examples use OGG files from wikimedia.

Also, check out the Bubble View

Features

The Timeline representation shows a graduate scale of time.

The Timeline has scale and scroll possibilities that can be bound to range input.

The Timeline can have multiple tracks, and on each track, you can assign markers or periods.

The periods can have an alternative bubble view.

Elements on the Timeline can be edited (create, read, update, delete)

Live possibilities for modifying the Timeline (add markers, periods, tracks may be)

Features support for SVG, VML and HTML5 Canvas via Dojox GFX API.

Resizable at runtime to adapt with Dijit layout managers (BorderContainer).

Cursor dragging for smooth interaction (can see periods being created).

New look and feel for enhanced user experience.

Major code refactoring into class hierarchy.

Features Font support.

Resizable time events and the ability to move between tracks.

Resizable handles adjust depends on the width of the time event.

Labels can be aligned to left, middle or right.

Support or Contact

For any questions contact me at adnan@websemantics.ca.