Hypervideo Enrichments

This sample shows the use of textual and graphic components to enrich the presentation of an audiovisual flow. In this example, we want to show the transcription in french of the Nosferatu movie panels and some data about the actors (figure, biography and link to their imdb page). Three synchronized components are here illustrated: imageviewer, textviewer and richtextviewer. Moreover, the hotspot component is illustrated, used to define anchors on the actor figures to expose a link to the related imdb pages.

First, the data readers are declared. We use two readers: a jsonreader to query the annotation structure and a data reader to pull data from wikipedia.

<div chm:component="jsonreader" id="data" chm:src="Nosferatu.json" >

<div chm:component="datareader" id="wiki" chm:src="http://en.wikipedia.org/w/api.php?action=parse&props=text&page=" >

The video is displayed by the CHM media player provided the URI of the file.

<div chm:component="videoplayer" id="tm" chm:src="http://advene.org/video/nosferatuVCD_256kb.ogv" >

The displayed hotspot are declared using the following syntax. The content is meant to handle the hotspot coordinates on the played video.

<div chm:component="hotspot" chm:src="data" chm:filter="type=='actor'" chm:content="${parsed.position}" chm:timelineref="tm" >

The panel content is dispplayed on the screen by a standard text viewer declared as follows

<div chm:component="textviewxer" chm:src="data" chm:filter="type=='panel'" chm:content="${parsed.textefr}" chm:timelineref="tm" >

At an actor appearance on the movie, a figure of him is shown on a distinct area, handled by a synchronized image viewer. The code to declare such a component is the following:

<div chm:component="imageviewxer" chm:src="data" chm:filter="type=='actor'" chm:content="${imagescache/${parsed.figure}}" chm:timelineref="tm" >

The biography of each actor id retrieved from Wikipedia and displayed on the screen when the actor appears thanks to a rich text viewer who may handle for instance web pages and pdf files. This component uses the two data readers: first, the actor identity is retrieved from the jsonreader and the result is used to query the data reader.

<div chm:component="richtextviewer" chm:src="data" chm:filter="type=='actor'" chm:param="wiki.page=${data.name}" chm:timelineref="tm" >