Collage Code (software)
Code available via subversion. (TO BE UPDATED TO THE NEW git repo)!
Collage code is implemented as a set of jquery (ui) plugins.
A timeline manages time-based page elements. A timeline has a notion of its currentTime, and elements can be added to the timeline with that have start and end times. Elements may overlap in timing. Timeline manages efficiently showing and hiding added elements based on the current time of the timeline. When attached to an HTML audio or video tag, or an AA "playable", the timeline follows the timeupdate events of the media element.
A simple example: To display subtitles, one attaches a timeline to an HTML5 video element. Subtitles (divs) are added to this timeline, each subtitle providing a start and ending time. As the video is played, the subtitles are hidden and shown appropriately in response to the current time of the media.
Playable is a wrapper for HTML5 media elements (audio and video tags), that also provides a standardized interface for pre-HTML5 media via plugins (for instance for YouTube, Vimeo clips, and playback of media via the Flash-based Flowplayer).
Adds a standarized notion of a start and end time, and optional looping (not yet implemented).
Playable using the html5 video tag.
Playable for YouTube videos via the embed API.
Animates a scrollable area to show a particular item. Useful in conjunction with jquery.timeline.js to provide auto-scrolling titles.
The software has been developed iteratively in conjunction with workshops and external projects. The following examples reflect this development and as such rely on (historical) versions of the software that may differ significantly from the current version.live demo
KWF Videodagboeken (Video Diaries, KWF Kankerbestrijding, in Dutch)
Uses collagecode to provide synchronized subtitles and suplementary information alongside video recordings and interviews, a project for the Dutch Cancer Foundation.
Next Festival, 2008, Bratislava
Dusan Barok made a very novel interface for a music festival held in Bratislava in 2008, based on the CC code. He also discovered that it doesn't work in Internet Explorer ... yet (oops, sorry Dusan ;). In this case the notion of the "timeline" of the scrub bar is literally mapped to a timeline of the three days of the schedule, which suggests interesting possible uses for other kinds of events.