The CHM language specification is implemented as an extension above
the HTML language. CHM namespaced attributes are associated to standard
HTML elements, and extend them with CHM specification behaviors. Such
behaviors are handled by a set of JavaScript libraries to perform a
content transformation to dynamically generate HTML code,
readable and understandable by modern browsers.
The CHM spatial model is supported by the indirect HTML layout model via cascading stylesheets (CSS) and container elements like DIV, while SMIL Timesheets implementation handles the document time and the synchronization model.
<html xmlns:chm="http://www.advene.org/ns/chm">
<html xmlns:chm="http://www.advene.org/ns/chm">
<script src="./chm.api/timeline/timeline_ajax/simile-ajax-api.js?bundle=true" type="text/javascript"/>
<script src="./chm.api/timeline/timeline_js/timeline-api.js?bundle=true" type="text/javascript"/>
<script type="text/javascript" src="./chm.api/res/jquery.js"/>
<script type="text/javascript" src="./chm.api/res/jqueryui.js"/>
<script src="chm.api/jquery.tmpl.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript" src="./chm.api/mediaelement.js"/>
<script type="text/javascript" src="./chm.api/chm.api.js"/>
<link type="text/css" href="./chm.api/res/theme/jqueryui.css" rel="stylesheet"/>
<link href="./chm.api/res/style.css" rel="stylesheet" type="text/css">
A component declaration requires to associate the chm:component attribute to a HTML container element like div.
<div chm:component
= "component_name"... >
The value of this attribute defines the component type. The available values are:
| id |
Unique identifier of the component |
| chm:src |
Source of the data. For a data reader,
the identifier of the
reader. |
| chm:filter |
The filter used to query the data reader |
| chm:timelineref |
The identifier of the TimedMedia used
as the time reference |
| chm:content |
The content to display when data is
received from the reader |
| chm:param |
Extra parameters to apply to the
component, when used |
CHM is an annotation-driven model and thus, for the design of a hypervideo, an annotation structure is required. For instance, an annotation structure performed by Advene and exported into JSon has the following form:
[...]
{
"id": "a1",
"type": "shots",
"media": "TimBerners-Lee_2009.mp4",
"begin": 0,
"end": 2000,
"content": "num=0"
},
{
"id": "a2",
"type": "shots",
"media": "TimBerners-Lee_2009.mp4",
"begin": 2000,
"end": 2333,
"content": "num=1"
},
{
"id": "a3",
"type": "shots",
"media": "TimBerners-Lee_2009.mp4",
"begin": 2333,
"end": 4083,
"content": "num=2"
},
{
"id": "a4",
"type": "shots",
"media": "TimBerners-Lee_2009.mp4",
"begin": 4083,
"end": 4124,
"content": "num=3"
},
[...]
The displayed document content is accessed through dedicated readers that fetch the appropriate content in response to components queries.
<!-- JSon format Annotation Reader -->The id attribute allows other components to use this as a data source. The chm:src attribute gives the absolute or relative path to the annotation file. For a generic annotation reader, this gives the source of the data provider.
<div chm:component="jsonreader" id="data" chm:src="Tim.json"/>
<!!-- Annotation Reader from wikipedia.org-->
<div chm:component="annotationreader" id="wiki" chm:src="http://en.wikipedia.org/w/api.php?action=parse&props=text&page="/>
To address a video fragment, we make use of the W3C Media Fragment by implementing a subset of its specification related to temporal fragments identification. The spatial part is handled by the proper annotation content definition. Hence, the following specifications are possible:
chm : href = "hotspotID";
chm : href = "componentID#t=.120";
chm : href = "componentID#t=.120,1.230";
chm : href = "http://www.exemple.com/video.mp4#t=.120,1.230";
A hypervideo contains at least a TimedMedia that contains the audiovisual stream which will be rendered within a player component.
<!-- VideoPlayer+TimedMedia -->The id attribute allow the components to use this as a timeline reference. The chm:src gives the absolute or relative path to the video file.
<div chm:component="videoplayer" id="tm" chm:src="MyAnnotatedVideo.mp4"/>
<div id='discours' chm:component='textviewer' chm:timelineref='tm' chm:src='data' chm:filter="type=='Transcript'" />
<div id="concepts" chm:component='richtextviewer' chm:timelineref='tm'
chm:src='wiki' chm:target='data' chm:filter="type=='Terms'"
chm:param="wiki.page={name}"" />
The chm:target attribute is used within this component to use the data sent by the data reader data as input for the data reader wiki.
<div chm:component='imageviewer' chm:timelineref="tm"
chm:src='data' chm:filter="type=='episode'"
chm:content="imagescache/${begin}.png" >
<div chm:component="caption" chm:src="data" chm:filter="type=='subtitle'"
chm:content="${content}" chm:timelineref="tm" >
<div chm:component="transcript" chm:src="data" chm:filter="type=='Transcript'"
chm:content="${content}" chm:timelineref="tm" >
A hotspot can be instanciated like follows:
<div chm:component='hotspot' chm:src='data' chm:filter="type=='gotoLink'"
chm:src='data' chm:target='_blank' />
A hypervideo table of content gives a flat or hierarchical representation index of the main audiovisual following features expressed as annotations or annotation types.
<div id="test" chm:component='toc' chm:src='data'
chm:filter="type=='Parts'" />
<div id="shots" chm:component='map' chm:src='data'
chm:filter="type=='shot'" chm:screenshot="true"/>
The chm:screenshot when placed to true allows the instanciate a graphical map made of screenshots. When false, the result is a textual map.
<div id='tl' chm:component='timeline'
chm:src='data' chm:filter="type=='Actors'"' />
The authoring process may be eased by a graphic user interface (GUI) environment; this is one of the future development stages. We also want to rely on cognitive theories to propose more meaningful rendering libraries. The interaction possibilities can be enriched by more advanced features like offering additional mechanisms to end-users, readers, annotations.