Collage Code (software)

From ActiveArchives
Jump to: navigation, search

Construction.gif This page represents an in process project. Temporalities may not fully align with reality.

Collage Code is a suite of Javascript functions (packaged as jQuery plugins) based on the idea of loosely joining different kinds of web content (video, audio, HTML, images) using a timeline. In a nutshell, Collage Code allows creating a time-based web pages with a variety of applications from subtitling videos to creating novel time-based interfaces and audio/video-based documents. The software was first presented at the Collaborative Online Video workshop held in Brussels in November 2008.

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.

Historical Examples

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.

CollageCode vj10.png
An example of an interface showing a lecture, combined with a transcript and related images, see a 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.

CollageCode dusan.png

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.

Personal tools