back to Samples

Hypervideo Maps



In this sample, we show how to declare a map made of screenshots, to give a visual index to the story content.

The annotation structure resulted from the analysis of the Nosferatu movie is stored following a json format in the Nosferatu.json file and accessed by a jsonreader component.

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

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 map component contains a set of references to video fragments, constituting an index. Within WebCHM, the references representation maybe graphical or textual. When textual, such map is merely a classic table of content.

<div chm:component="map" chm:src="data" chm:srceenshot="false" chm:filter="type=='movie_part'" chm:content="${parsed.nom}" chm:timelineref="tm" >

For iconic and graphical representations, the indexes are mainly a set of screenshots extracted from the flow. We have implemented a feature that allows the display of the associated fragment upon the figure area, as it can be experimented in this sample. The code to declare such map has no particular feature except an attribute (chm:srceenshot) to indicate whether the map entries have graphical representation or textual one.

<div chm:component="map" chm:src="data" chm:srceenshot="true" chm:filter="type=='episode'" chm:content="imagescache/${begin}.png" chm:timelineref="tm" >

Movie Episods

Movie Parts :

x

Source Code of the Sample


Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!