Use Cases

Open Hypervideo Prototypes & Implementations

Checkout for the open source hypervideo environment

Science Communication

InsideScience Project
"Knowledge Space - Elementary Particle Physics"
Karlsruhe Institute of Technology (KIT),
ZAK | Centre for Cultural and General Studies

View details ⇩

➡ Live Demo ( Firefox, Chrome, Safari )

Document Access

Archives de la Ville de Bruxelles
Open Hypervideo Prototype
Archives of the City of Brussels


View details ⇩

➡ Live Demo ( Firefox 9+ )


  • No Flash. No Silverlight.
  • HTML5, CSS3, Javascript & SVG
  • Libraries:
    PopcornJS, jQuery, RaphaëlJS
  • Server-Side (InsideScience Project):
    PHP, MySQL
  • Video-Formats:
    webm, mp4 (InsideScience Project)

View details ⇩

Science Communication


The "Knowledge Space - Elementary Particle Physics" has been developed in 2012 within the framework of the project "Public Science and Digital Knowledge Spaces“. The project was a cooperation between the ZAK | Centre for Cultural and General Studies at Karlsruhe Institute of Technology (KIT) and Merz Akademie Stuttgart, with funds from "Kreativitäts- und Innovationsring Baden-Württemberg".

Screenshot InsideScience
Knowledge Space - Elementary Particle Physics

All 21 Videos have been shot in 2011 as part of the project "InsideScience – Public Science in Collaborative Research Projects", supported by the "German Research Foundation" (DFG). The goal of "InsideScience" is to make complex scientific research accessible and comprehensible to a broad public.

New Features

For the project, the Open Hypervideo Player has been improved both in terms of usability and project-specific functional requirements. With the new player, it is now possible to:

  • add an unlimited number of annotations to a sequence
    (the layout adjusts automatically)
  • reference different annotation-types, such as:
    • Wikipedia Articles
    • Locations (OpenStreetMaps)
    • Videos (Youtube & Vimeo or any HTML5 Video [webm&mp4] )
    • Webpages
    • Images
    • Arbitrary Text
  • cut videos (set start- & endpoints)
  • build sequences out of multiple (cut) video files
  • add multilingual and interactive transcripts
    (in sequences with multiple videos, the transcripts are automatically cut and joined into a single sequence-transcript)
  • interlink an unlimited number of sequences

Screenshot InsideScience
Interlinked sequences form an extendable "filmic web"
Screenshot InsideScience
Different view-modes support the best possible learning experience
Screenshot InsideScience
Annotations are embedded directly in the video

Some experimental features have been disabled for this prototype. Those include possibilities for users to actively record and then share their trail through the hypervideo web. For conceptual reasons, we also completely removed sensitive regions / hotspots from the interface.

➡ Live Demo ( Firefox, Chrome, Safari )

Scientific Direction: Prof. Dr. Caroline Y. Robertson-von Trotha
Project Coordination (ZAK): Stephan Breuer, Jesús Muñoz Morcillo
Project Coordination (Merz Akademie): Prof. Mario Doulis, Jörg Frohnmayer
Implementation: Joscha Jäger, Stephan Breuer
Software Development: Joscha Jäger

InsideScience Partners

Document Access


This application been developed in 2012 as the practical part of my Bachelor's Thesis. It is meant to serve as a general prototype for the idea of open hypervideo. The material, as well as the film scenes stem from the premises of the Archives of the City of Bruxelles (Archives de la Ville de Bruxelles).

Navigating the Archive

With the prototype, I refer to the origins of the hypertext idea by designing an environment for document- and knowledge management purposes. The ubiquitous universe of documents – described by Nelson as “docuverse” – can be found at a much smaller scale in the documents belonging to one city. Municipal archives, as the place where all the documents come together, can thus be seen as a microcosm of the “docuverse”. In my project, I used documents from the Archives de la Ville de Bruxelles (Archives of the City of Brussels) as material for the hypervideo annotations. In addition, the film material that is the basis for the hypervideo environment consists of scenes filmed inside the archive. What emerges is a hypervideo interface that allows access to archival records through the eyes of the film author and his or her view of the archive space. The goal is hereby to make the usually invisible storage space part of the visual interface through which the document is retrieved. The narrative structure is based on the different archive premises and their interconnection. Stairways thus became important filmic paths that interconnect the different floors.

Screenshot Stairways

The project aims to re-visualize the document context within the archive, as well as the invisible connections in between archival records (the archival methodology).

Film as Interface

As well as electronic hypertext is its own interface, open hypervideo is designed as a filmic interface that is controlled from within the film representation. Conclusively, there is no separate hypervideo player. As described in the thesis, film frames are the constantly changing background of the interface. This circumstance makes it hard to define general design rules for anything that overlays the film. For the prototype, I decided to mark hotspots on the film surface by fading out the opacity of anything but the respective spatio-temporal link:

Screenshot Interface

Annotated documents become visible when the associated hotspot is active. To be able to serve the needs for different levels of interactivity and immersion, there are three view modes: One that lays out the documents dynamically around the film fragment, one that shows the documents in a timeline and a full screen view where the documents are presented on top of the video. When documents are clicked, they are in each mode shown inside the film representation, as this is their link context. There is intentionally no possibility to access documents outside of the film. However, as each document has a unique URI that describes not only the document source but also its hypervideo context, documents can be directly referenced by a link that opens the document inside the respective film fragment. The interface is meant to lead the user over different paths through the archival records. To acknowledge the immersive properties of film, the amount of interaction required depends on the user. Conclusively, it are these decisions that regulate how much of the hypervideo is a film and how much is an interface.


➡ Live Demo ( Firefox 9+ )


Archives de la Ville de Bruxelles

More Info
Screencast on Youtube
Project Page @ Merz Akademie
Interview on VideoLectures.NET

Former Prototypes & Experiments
(may only work in certain Browsers)
HTML5 Hypervideo Experiment
First Open Hypervideo Prototype


The prototype for the "Archives of the City of Bruxelles" is built exclusively with open web technologies (HTML5, Javascript, CSS3 & SVG). The source code is publicly available at Github under the MIT-License and the video files used are distributed in a non-proprietary format WebM.
For the "InsideScience"-Project, data is stored in a database (MySQL) and loaded in the player interface through PHP.

Even though the applications were created to be able to demonstrate the use of open hypervideo for a certain purpose, the technical infrastructure is thought and designed as a reusable framework. Unlike foreign objects as Flash or Silverlight, the open hypervideo architecture can be fully integrated in the organizational concept of the web. Open hypervideo works can be interlinked, rewritten, extended, remixed or hacked without any restrictions. Building on Nelson’s notion of literature being debugged, film shall in an open hypervideo environment be in a constant state of “openendedness”, allowing any changes at runtime. Cuts, effects, overlays and links shall be defined in open source code, rather than rendered out of an editing-software. Finally, the “open” in open hypervideo also refers to the “open type” of hypervideos. Other than hypervideos that are built upon the narrative structure of one main video, hypervideos of open type form an extendable and non-linear network of interconnected scenes.


In my Thesis I introduce an architectural approach for web-based hypervideo, which I implemented in the actual prototype. At the very basis, it consists of three layers: A non-linear network of interconnected narrative sequences, which are each composed of at least one video scene that includes time-based annotations (documents). A narrative sequence is a semantically concluded information unit and can be connected at both ends to an unlimited number of other sequences.

Components of an Open Hypervideo Architecture
Components of an Open Hypervideo Architecture (Source: Thesis)

The overall idea is to use film fragments as organizational structure for the annotated documents. As the structure is truly non-linear (nodes with multiple destinations), there is a potentially unlimited web of filmic paths that can be followed. By connecting documents to specific points of time in the film, the video fragment in between two documents becomes a filmic link. One goal of the project is to provide a proof-of-concept implementation of these filmic links in reference to existing hypertext links and by taking the original hypertext ideas into account. This also includes the elaboration of non-linear storytelling techniques and their use within a web-based hypervideo system.

Open Source @ Github

View Code

Technologies & Standards

HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, Multimedia, and Semantics
PopcornJS Logo
jQuery Logo
jQuery Logo